javascript - 使用新数据更新 d3 图表

Question

我有an example of a chart on jsFiddle其中有多组多行。它绘制成功，但我希望能够转换到新的数据集。

该示例应在 4 秒后更新为新数据。尽管调用了图表(并在控制台中输出了一些内容)，但线条并未更新。

我已经尝试了很多基于现有的、更简单的例子的变体，但没有成功。我怀疑它是嵌套数据 based on this SO answer这比平时更让我感到困惑。

SO 坚持我在答案中有一些代码，所以这里是我假设我需要添加/更改一些东西的地方:

  svg.transition().attr({ width: width, height: height });
  g.attr('transform', 'translate(' + margin.left +','+ margin.right + ')');

  var lines = g.selectAll("g.lines").data(function(d) { return d; });
  lines.enter().append("g").attr("class", "lines");

  lines.selectAll("path.line.imports")
      .data(function(d) { return [d.values]; })
      .enter().append("path").attr('class', 'line imports');

  lines.selectAll('path.line.imports')
      .data(function(d) { return [d.values]; })
      .transition()
      .attr("d", function(d) { return imports_line(d); });

  // repeated for path.line.exports with exports_line(d).

Answer 1

问题在于您确定所有内容都附加到的顶级 g 元素的方式:

var g = svg.enter().append('svg').append('g');

这只会在没有 SVG 的情况下设置，因为您只处理输入选择。如果存在，g 将为空，因此什么也不会发生。要修复，请在之后明确选择 g:

var g = svg.enter().append('svg').append('g').attr("class", "main");
g = svg.select("g.main");

完整演示 here .