Основная анимация svg для флеш-формы d3

gazdagergo спросил: 31 июля 2018 в 09:49 в: javascript

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


1 ответ

gazdagergo ответил: 31 июля 2018 в 09:49

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

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);

Workingpenpen.

rioV8 ответил: 31 июля 2018 в 09:57
Это ответ или дополнение вопроса? Вы можете редактировать вопросы и удалять ответы.
gazdagergo ответил: 31 июля 2018 в 09:59
Нет, я опубликовал вопрос + ответ вместе, чтобы поделиться своими выводами.
rioV8 ответил: 31 июля 2018 в 10:00
Затем отредактируйте вопрос с содержанием ответа.
gazdagergo ответил: 31 июля 2018 в 10:01
Я следовал этой статье как это сделать.
rioV8 ответил: 31 июля 2018 в 12:46
Какой смысл задавать вопрос и сразу же публиковать ответ на вопрос, который был задан и на который несколько раз отвечали, здесь, на SO. Или есть еще вопрос, то это не ответ, а дополнительная информация по вопросу