d3.js中各点之间的转换

Question

我目前正在尝试生成一条由三点组成的曲线。我想生成一个动画，您可以在其中查看线条的创建方式，即点对点。使用我当前的代码，我不知道为什么转换不起作用

    var curved = d3.svg.line()
        .x(function(d) { return d.x; })
        .y(function(d) { return d.y; })
        .interpolate("cardinal")
        .tension(0)
    var points = [{x: 70, y: 52.5}, {x: 250, y: 250}, {x: 70, y: 447.5}];

    d3.select("#g-1").append("path").attr("d", curved(points)).transition().duration(2000);

http://jsfiddle.net/41bo44tt/

Answer 1

在D3中，转换选择将从状态A转换到状态B.现在，在您的代码中，transition()方法之后有无。

话虽这么说，你想要的东西可以用不同的方法来实现。经典的只是使用路径的长度来设置stroke-dasharray，将初始stroke-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 curved = d3.svg.line()
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return d.y;
  })
  .interpolate("cardinal")
  .tension(0)

var points = [{
  x: 70,
  y: 52.5
}, {
  x: 250,
  y: 250
}, {
  x: 70,
  y: 447.5
}];

var path = d3.select("#g-1").append("path").attr("d", curved(points));

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

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

path {
  fill: none;
  stroke: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="300" height="500">
  <g id="g-1"></g>
  <g id="g-2"></g>
</svg>