Как добавить переход к этой линейной диаграмме D3 [дубликат]

Один из способов сделать анимацию рисования маршрута в d3 - использовать атрибуты тире и массива.

Что вы можете сделать, это установить dashoffset на общую длину пути, а затем уменьшить настройку dashoffset с течением времени, пока оно не станет равным нулю. Это будет имитировать пройденный путь. Посмотрите документы SVG на stroke-dasharray и stroke-dashoffset .

Понятно, что вы делаете следующее:

Скажите, что ваша линия длится 4 единицы (----). Вы устанавливаете dasharray (---- ,,,,), т. Е. Четыре единицы, а затем четыре пробела. Вы устанавливаете dashoffset как 4 единицы, поэтому линия будет лежать на 4 единицы слева от видимого пространства. Затем, когда вы уменьшите dashoffset до 0, линия будет выглядеть как (- ,,,,), а затем (- ,,,,) и так далее, пока не будет нарисована вся строка.

var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.price); });

var path = svg.append("path")
                  .attr("d", line(data))
                  .classed("line", true);

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

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

-

Из из Duopixel отправлено здесь .