javascript - 对d3js条形图进行排序

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 6 年前。

Improve this question

我正在使用以下示例 Interactive Bar Chart I

我尝试按升序或降序对条形图进行排序，但我挣扎了很多，我发现了以下排序示例 Sorted Interactive Bar Chart I但它仅按下拉菜单中的第一项排序，即 TotalPopulation，而不是其余项目。

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

Answer 1

第 1 步首先，不要在更新时计算每个条形的 x 位置，而是使用 x 比例。 IE。改变

.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 -set，按正确的属性排序，您有一个 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