如何在 d3.js 中转换路径

Question

我如何过渡（例如，动画创作）路径以提供一些视觉效果。它可能是从左到右创建线/路径。我试过类似的东西。

我分叉了迈克的例子，并添加了喜欢

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

  var t = svg.transition().duration(700);
  t.select('.line').attr('d', line(data));

它现在给出了路径错误，但我在更新 gist 和 bl.ocks 时遇到了一些困难。但我记得它正在工作（但没有动画）。

如何获得动画图表？

Answer 1

我认为没有人比 Mike Bostock 本人更能描述它：Path Transitions。

您可以使用本教程中示例的变体来制作不同类型的动画。虽然他的示例非常适合转换路径以响应添加的新数据，但您可以轻松地使用类似的技术来制作动画以响应现有数据的更改 —— 或者只是完全添加一个新系列。

如果您能明确说明您想要制作什么样的动画，我可能会提供更多细节以实现这一目标。