Question

我尝试通过升序或降序对条形图进行排序，我努力了很多，我找到了以下排序的示例Sorted Interactive Bar Chart I，但它只按下溺水菜单中的第一项排序，即TotalPopulation而不是其余的。

任何对所有项目进行排序的帮助都将受到高度赞赏。

Answer 1

第1步 首先，不要在更新时计算每个条的x位置，而是使用x-scale instaed。即变化

.attr("x", function(d, i){
    return (width / data.length) * i ;
})

到

.attr("x", function(d, i){
    return x(d.State);
})

第2步 在您的.on("change"） - 事件中，您需要像第一次那样使用数据，但这次使用下拉列表中的值。所以添加

data.sort(function(a,b){;return d3.ascending(+a[selection.value], +b[selection.value])});

之后

selection = document.getElementById("dropdown");

第3步 现在您有一个data - 集合，该集合按正确的属性排序，并且对于使用x - 比例的每个条形图，您有一个x - 值。因此，最后一步是更新x - 比例并使用新近排序的data设置域。因此，在上面添加的排序之后，添加：

x.domain(data.map(function(d){ return d.State;}));

第4步 您需要做的最后一件事是更新x-axis，以便标签对应于条形图。通过添加

来做到这一点

svg.selectAll("g.x.axis")
    .call(xAxis)
    .selectAll("text")
    .style("font-size", "8px")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)" );

在上面的代码之后。

请参阅此处的工作示例：http://blockbuilder.org/anonymous/f69c4a5c048750f902aa6f925b9f2320

排序d3js条形图

1 个答案: