与d3js动画SVG路径

我有与标准SVG笔标记（ “M 130 30”， “L 132，40” 等）所限定的非常复杂的路径。如何利用这个标记，并创建一个路径，所以我可以在此描述？：慢慢地绘制整个路径Can't make paths draw growing slowly with D3 与d3js动画SVG路径

来源

2013-07-06 victor

的走近仍然有效，即使是动画的<path>节点不是由产生的问题在duopixel's answer上市D3。下面是使用现有的SVG路径节点的duopixel's code修改后的版本：

<!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>

或者，如果你做要使用D3为创建节点，只是把现有的路径字符串，并在适当位置使用的line()函数调用。再次，适应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");

来源

2013-07-06 02:28:42 explunit

因此，这似乎在同一时间绘制所有线。我想它绘制的顺序，它在指定的路径 - 画一条线在同一时间。我可以用这个代码来做到吗？具体而言，这似乎是在时间= 0，前一后没有一个运行所有的M行动。 – victor

其实，我想我会这样移动到另一个问题，因为它是现在都没有涉及这个...... – victor

http://stackoverflow.com/questions/17506262/sequentially-animate-svg-with-d3js – victor

与d3js动画SVG路径

回答

相关问题