基本的d3折线Flash形状svg动画

Question

我想使用d3创建具有动画的Flash形折线图。

Answer 1

我设法拼凑而成。我使用了this tutorial，只是我的解决方案基于坐标而不是数据集。

html

<script src='https://d3js.org/d3.v2.js'></script>
<svg
  width="100"
  height="100"
  id="flash"
  xmlns="http://www.w3.org/2000/svg">
</svg>

css

path {
  stroke: steelblue;
  stroke-width: 2;
  fill: none;
}

js

var svg = d3.select("#flash");

var coords = [
  {x: 10, y: 0},
  {x: 30, y: 30},
  {x: 15, y: 30},
  {x: 50, y: 80}
]

var line = d3.svg.line()
  .interpolate("linear")
  .x(c => c.x)
  .y(c => c.y)

var path = svg.append("path")
  .attr("d", line(coords))

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

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

工作Codepen。