d3条形图中的排序功能不会仅对条形进行排序名称

Question

我很确定这曾经有效。我希望能够在单击栏时按值排序，然后在再次单击栏时按名称排序。

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

现在我只在底部排序名称，但没有选择条形。我搞砸了什么？

谢谢！

Answer 1

啊，我的 css 缺少我用来识别单个条的类名。我只是为所有条添加了一个“id”属性，然后通过它收集它们。

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

      var delta = d.value;
      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", "orange");

      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.select("#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("g")
                    .delay(delay);
};

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