javascript - 对堆积条形图 d3js 进行排序

Question

在此plunker 我遇到了与我的 previous question 中相同的问题从技术上讲，我的 data.sort 函数按应有的方式对条进行排序，但不是以所需的方式进行排序。

就像上次一样，我希望它们像 this 一样排序。 而不是他们现在的排序方式。

我尝试以各种方式将 data.sort 与 x.domain 和 axis--x 放在一起，但没有成功，并且我已经没有主意了。

一如既往地感谢任何帮助!

Answer 1

已更新plunker

您需要使用关键函数.data(d=>d,d=>d.data.State);，以便d3知道哪些数据是新的、旧的或现有的。建议始终使用 key 函数，除非您希望数据通过数组索引进行键控。

您还需要对现有条形应用x 转换。

即使您的示例在初始数据之后没有新数据，将 enter 选择与 update 选择合并，然后运行过渡。

let bars = g.selectAll("g.layer").selectAll("rect")
      .data(d=>d,d=>d.data.State);

  bars = bars.enter().append("rect")
      .attr("width", x.bandwidth()).merge(bars)
    .transition().duration(Globalvar.durations)
      .attr("x", function(d) { return x(d.data.State); })
      .attr("y", function(d) { return y(d[1]); })
      .attr("height", function(d) { return y(d[0]) - y(d[1]); });

请注意，对于 enter 和 update 选择，合并代码比编写两次转换更简洁。

let bars = g.selectAll("g.layer").selectAll("rect")
      .data(function(d) { return d; });

bars.enter().append("rect")
      .attr("width", x.bandwidth())
    .transition().duration(Globalvar.durations)
      .attr("x", function(d) { return x(d.data.State); })
      .attr("y", function(d) { return y(d[1]); })
      .attr("height", function(d) { return y(d[0]) - y(d[1]); });

  bars.transition().duration(Globalvar.durations)
      .attr("y", function(d) { return y(d[1]); })
      .attr("height", function(d) { return y(d[0]) - y(d[1]); });