條形圖過渡，奇怪的行為d3.js

Question

我很好奇是否有人可以指出我在這里做錯了什么？ 我希望我的代碼能夠在單擊事件上產生平穩的過渡，相反，第一次單擊只會移動x軸標簽（為什么？如何解決此問題？），然后第二/第三次進行排序。 有辦法防止這種情況發生嗎？ 我想對首次點擊進行排序，如果我的標簽沒有跳來跳去，那肯定會很好。 我在這里想念什么？

http://jsbin.com/cohaziqugo/edit?js，輸出

var data =  [{"name":"A","value":0.08167},{"name":"B","value":0.01492},{"name":"C","value":0.0278},{"name":"D","value":0.04253},{"name":"E","value":0.12702},{"name":"F","value":0.02288},{"name":"G","value":0.02022},{"name":"H","value":0.06094},{"name":"I","value":0.06973},{"name":"J","value":0.00153},{"name":"K","value":0.00747},{"name":"L","value":0.04025},{"name":"M","value":0.02517},{"name":"N","value":0.06749},{"name":"O","value":0.07507},{"name":"P","value":0.01929},{"name":"Q","value":0.00098},{"name":"R","value":0.05987},{"name":"S","value":0.06333},{"name":"T","value":0.09056},{"name":"U","value":0.02758},{"name":"V","value":0.01037},{"name":"W","value":0.02465},{"name":"X","value":0.0015},{"name":"Y","value":0.01971},{"name":"Z","value":0.00074}];

var tickValues = data.map(function (d){return d.name;});
var step = Math.floor(tickValues.length / 24);
var indexes = d3.range(0,tickValues.length, step);
if (indexes.indexOf(tickValues.length - 1) == -1){
    indexes.push(tickValues.length - 1);
}
var tickArray = d3.permute(tickValues, indexes);

var margin = { top: 40, right: 20, bottom: 30, left: 40 },
    width = 1500 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .domain(data.map(function (d) { return d.name; }))
    .rangeBands([0, width], 0.1, 0.35);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickValues(tickArray);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var barChart = d3.select("#barbarchart1").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    y.domain([0, 0.2]);

barChart.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-0.8em")
      .attr("dy", "0.15em")
      .attr("transform", function(d){
          return "rotate(-65)"
      });

barChart.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Test");

barChart.selectAll("#bar")
    .data(data)
    .enter().append("rect")
    .attr("id", "bar")
    .attr("x", function (d) { return x(d.name); })
    .attr("width", x.rangeBand())
    .attr("y", function (d) { return y(d.value); })
    .attr("fill", "grey")
    .attr("height", function (d) { return height - y(d.value); })
    .on("click", function() {sortBars();})
    .on("mouseover", function(d){

        var xPos = parseFloat(d3.select(this).attr("x"));
        var yPos = parseFloat(d3.select(this).attr("y"));
        var height = parseFloat(d3.select(this).attr("height"));
        var width = parseFloat(d3.select(this).attr("width"));

        d3.select(this).attr("fill", "red");

        barChart.append("text")
            .attr("x",xPos)
            .attr("y", yPos - 3)
            .attr("font-family", "sans-serif")
            .attr("font-size", "10px")
            .attr("font-weight", "bold")
            .attr("fill", "black")
            .attr("text-anchor", "middle")
            .attr("id", "tooltip")
            .attr("transform", "translate(" + width/2 + ")")
            .text(d.name +": "+ d.value);
    })
    .on("mouseout", function(){
        barChart.selectAll("#tooltip").remove();
        d3.select(this).attr("fill", "grey");             
    });

var sortOrder = true;

var sortBars = function() {

    //Flip value of sortOrder
    sortOrder = !sortOrder;

    var x0 = x.domain(data.sort(sortOrder
      ? function(a, b) { return b.value - a.value; }
      : function(a, b) { return d3.ascending(a.name, b.name); })
      .map(function(d) { return d.name; }))
      .copy();

    barChart.selectAll("#bar")
      .sort(function(a, b) { return x0(a.name) - x0(b.name); });

    var transition = barChart.transition().duration(750),
        delay = function(d, i) { return i * 50; };

    transition.selectAll("#bar")
        .delay(delay)
        .attr("x", function(d) { return x0(d.name); });

    transition.select(".x.axis")
        .call(xAxis)
        .selectAll("text")
        .selectAll("g")
        .delay(delay)
    ;};

function type(d) {
    d.value = +d.value;
    return d;
}

Answer 1

我的解決方案： http : //jsbin.com/cequrabuqi/edit?js，輸出

第一次點擊只會移動x軸標簽

data的默認排序是升序。 第一次單擊時，將sortOrder從true翻轉為false，從而使三元條件選擇function(a, b) { return d3.ascending(a.name, b.name); }) function(a, b) { return d3.ascending(a.name, b.name); })作為排序順序，但仍在上升。 代碼正確無誤，但看起來很糟糕，因為排序順序在第一次單擊時就不會改變，因此屏幕上的條沒有任何變化。

如果我的標簽不跳動會很好。

我不完全了解D3，但是似乎發生的是當您調用transition.select(".x.axis").call(xAxis) ，它會刪除您應用的所有樣式。 因此，在我的解決方案中，每次調用sort函數時，我都會重新應用樣式。