d3.js 中的路径转换不起作用

Question

我正在尝试在 d3.js 中的路径上进行转换。当用户点击一个按钮时，路径上应该有一个从开始到结束的过渡。

我尝试用这段代码来做到这一点：

const lineGraph = d3.select("svg")

  .append("path")

  .attr("d", "M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");

const length = lineGraph.node().getTotalLength();

lineGraph

  .attr("stroke-dasharray", length + " " + length)

  .transition()

  .duration(2000)

  .ease(d3.easeLinear);

path {

  stroke: black;

  stroke-width: 1px;

  fill: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<svg></svg>

路径显示在屏幕上，但没有过渡。

Answer 1

那是因为你需要从某物过渡到另一物。在使路径出现的情况下，即从 stroke-dasharray0 length到length length：const lineGraph = d3.select("svg")&nbsp; .append("path")&nbsp; .attr("d", "M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");const length = lineGraph.node().getTotalLength();lineGraph&nbsp; .attr("stroke-dasharray", "0 " + length)&nbsp; .transition()&nbsp; .duration(2000)&nbsp; .ease(d3.easeLinear)&nbsp; .attr("stroke-dasharray", length + " " + length);path {&nbsp; stroke: black;&nbsp; stroke-width: 1px;&nbsp; fill: none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script><svg></svg>