排序功能在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; 
}