javascript - 如何在 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。

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

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