Javascript d3.js中点之间的转换

我目前正在尝试生成一条曲线，它由三个点组成。我想生成一个动画，你可以看到线是如何创建的，也就是说，点对点。用我目前的代码，我不知道为什么转换不起作用

---

在D3中，转换选择将从状态a转换到状态B。现在，在您的代码中，转换方法之后没有任何内容

也就是说，你想要的东西可以用不同的方法来实现。经典的方法是使用路径的长度设置笔划dasharray，将初始笔划dashoffset设置为路径的长度，然后在转换中将其更改为0：

var totalLength = path.node().getTotalLength();

path.attr("stroke-dasharray", totalLength + " " + totalLength)
    .attr("stroke-dashoffset", totalLength)
    .transition()
    .duration(2000)
    .attr("stroke-dashoffset", 0);

以下是使用您的代码的演示：

var curve=d3.svg.line .X功能{ 返回d.x； } .功能正常{ 返回d.y； } .内插心形 .张力0 变量点=[{ x:70， y:52.5 }, { x:250， y:250 }, { x:70， y:447.5 }]; var path=d3.selectg-1.appendpath.attrd，曲线点； var totalLength=path.node.getTotalLength； path.attrstroke-dasharray，总长度++总长度 .偏移量，总长度 过渡 .期限2000 .attrstrow-dashoffset，0； 路径{ 填充：无； 中风：000； }

---

看看你的代码：你正在把路径转换成什么？你的路径是你想要的最终状态吗？如果是这样的话，理想的初始状态是什么？@GerardoFurtado我不太了解这个主题，我只想从线{x:0，y:5}的第一点到终点{x:30，y:5}@Andrewerid我不太了解这个主题，我只想从线{x:0，y:5}的第一点得到一个动画到最后一点{x:30，y:5}@GerardoFurtado我需要这个，请看图片..太好了！非常感谢。这条线是什么？var totalLength=path.node.getTotalLength；我不明白什么是。节点？路径只是一个D3选择。path.node是实际的DOM元素。

var totalLength = path.node().getTotalLength();

path.attr("stroke-dasharray", totalLength + " " + totalLength)
    .attr("stroke-dashoffset", totalLength)
    .transition()
    .duration(2000)
    .attr("stroke-dashoffset", 0);