Question

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

该示例应在4秒后使用新数据进行更新。虽然图表被调用（并在控制台中输出内容），但行不会更新。

我已经根据现有的，更简单的例子尝试了很多变化，没有运气。我怀疑它的嵌套数据based on this SO answer让我比以往更加困惑。

所以我坚持在答案中有一些代码，所以我假设我需要添加/更改一些内容：

  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。

使用新数据更新d3图表

1 个答案: