Question

我很好奇是否有人可以指出我在这里做错了什么？我希望我的代码能够在点击事件上产生平滑过渡，相反，首先点击只会移动x轴标签（为什么？我该如何修复？），然后第二/第三次进行排序。有没有办法防止这种情况发生？我想在第一次点击时排序，确定如果我的标签没有跳转就会很好。我在这里错过了什么？

http://jsbin.com/cohaziqugo/edit?js,output

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,output

首先单击仅移动x轴标签

data的默认排序是升序。在第一次单击时，您将sortOrder从true翻转为false，从而导致您的三元条件选择 function(a, b) { return d3.ascending(a.name, b.name); })作为排序顺序，仍然是升序。虽然代码是正确的，但它看起来很糟糕，因为排序顺序在第一次点击时永远不会改变，因此屏幕上的条形图没有任何变化。

如果我的标签没有跳转，那么
会很好。

我并不完全理解D3，但似乎发生的事情是当你致电transition.select(".x.axis").call(xAxis)时，它会删除你应用的所有样式。所以在我的解决方案中，每次调用sort函数时我都会重新应用样式。

条形图转换，奇怪的行为d3.js

1 个答案: