使用d3js为SVG路径设置动画

Question

I've got a very intricate path defined with the standard SVG pen markup ("M 130 30", "L 132, 40", etc). 我有一个非常错综复杂的路径，用标准的SVG笔标记（“M 130 30”，“L 132,40”等）定义。 How do I take this markup and create a path so I can draw the entire path slowly as described here?: Can't make paths draw growing slowly with D3 如何使用此标记并创建路径，以便我可以如此处所述缓慢绘制整个路径？：无法使路径绘制缓慢增长D3

Answer 1

The approached listed in duopixel's answer in that question still works even if the <path> node to be animated was not generated by D3. 即使要生成动画的<path>节点不是由D3生成的， duopixel在该问题中回答的内容仍然有效。 Here is a modified version of duopixel's code using an existing SVG path node: 以下是使用现有SVG路径节点修改的duopixel代码版本：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" id="visualization" height="300" width="700">
        <path id="existingLine" fill="none" stroke-width="2" stroke="steelblue" 
        d="M0,45.355864964297126Q56,93.30709264413157,70,101.42710214950955C91,113.60711640757651,119,112.60236634997189,140,126.5559600180769S189.00000000000003,192.28891292428457,210.00000000000003,194.45105993687628S259,143.07483109253366,280,140.97027343535498S329,190.98168538928422,350,180.42067555568514S399.00000000000006,58.614334097794526,420.00000000000006,70.56354121136098S469.00000000000006,240.5996349725512,490.00000000000006,260.08205631279486S539,201.70472761196623,560,200.44635014631868S609,277.9853193478483,630,251.69287320847783Q644,234.16457578223088,700,25.163375883849042">
        </path>
    </svg>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script type="text/javascript">
    // select the already-existing path node via its ID.
    var path = d3.select("#existingLine");

    // from here forward the code is exactly like the original....
    var totalLength = path.node().getTotalLength();

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

  </script>
</body>
</html>

Or, if you do want to use D3 for the creation of the node, just take your existing path string and use it in place of the line() function call. 或者，如果您确实想使用D3创建节点，只需获取现有的路径字符串并使用它代替line()函数调用。 Again, adapting duopixel's code: 再次，调整duopixel的代码：

var path = svg.append("path")
  .attr("d", "M 130 30", "L 132, 40") // and so on
  .attr("stroke", "steelblue")
  .attr("stroke-width", "2")
  .attr("fill", "none");

使用d3js为SVG路径设置动画

问题描述

1 个解决方案

解决方案1
4 已采纳 2013-07-06 02:28:42

使用d3js为SVG路径设置动画

问题描述

1 个解决方案

解决方案1 4 已采纳 2013-07-06 02:28:42

解决方案1
4 已采纳 2013-07-06 02:28:42