D3 燃尽图的数据刷新问题

Question

我正在构建一个“燃尽”d3 折线图，试图根据范围和历史数据预测趋势。

下拉框选择要显示的数据，理想情况下是在行之间转换，但我在清除之前显示的数据时遇到了麻烦，而是新行被写入现有行。

Link 到 jsfiddle：https://jsfiddle.net/dgf1vts8/

目前正在这样做（第 329 行）：

svg.append("path")
      .datum(selectedData)
      .attr("class", "line")
      .attr("d", line);

我尝试过但没有奏效的其他方法（第 318 行）

var lines = svg.selectAll(".line").data(selectedData).attr("class","line");
    lines.transition().duration(500).attr("d",line);
    lines.enter()
      .append("path")
      .attr("class","line")
      .attr("d",line);
    lines.exit()
      .remove();

如有任何指导，我们将不胜感激

Answer 1

由于您只在更新函数中追加新对象，因此每次调用该函数时都会在图表中添加一个新行。

最简单的解决方法是在添加新路径对象之前删除所有路径对象。

svg.selectAll("path").remove();

但是，enter-update-exit 的逻辑是

  var lines = svg.selectAll(".line").data(selectedGroup);
  lines.enter() // enter any new data
    .append("path")
    .attr("class", "line")
    .merge(lines)
    .datum(selectedData)
    .attr("d", line);
  lines.exit() // exit
    .remove();

lines 的逻辑与 e 不同。 G。点或条，您需要在其中为时间序列的每个数据点创建一个对象。对于线条，您只需创建一个路径对象。这就是为什么数据绑定到选择

svg.selectAll(".line")

应该是行的标签。如果您使用多行，通常最好嵌套数组。

如果您开始一个新项目，您可能应该使用当前版本的 d3v7 而不是 d3v3，因为发生了破坏兼容性的重大变化。我减少了你的 fiddle 并更改了所有部分以使其与 d3v7 一起工作：https://jsfiddle.net/esd4kofr/1/

D3 燃尽图的数据刷新问题

Data refresh issue with D3 burnup chart

javascript

d3.js