Базовая анимация SVG в виде полилинии d3

Question

Я хотел бы создать рисунок полилинии в форме вспышки с анимацией , используя d3.

Answer 1

Мне удалось собрать кусочки вместе.Я использовал этот урок , только мое решение основано на координатах, а не на наборе данных.

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 .