Question

在这个 plunker 中我遇到的问题与我在previous question中遇到的问题相同，我的data.sort函数在技术上对它们进行排序，但不是以期望的方式。

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

我已尝试以data.sort和x.domain与axis--x和System.out.println(time)一起以各种方式取得任何成功，而且我完全没有想法。

任何帮助都一如既往地受到赞赏！

Answer 1

更新plunker

您需要使用关键函数.data(d=>d,d=>d.data.State);，以便d3知道哪些数据是新数据，旧数据还是现有数据。建议始终使用键功能，除非您希望数据由数组索引键入。

您还需要将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]); });

排序堆积条形图d3js

1 个答案: