Анимировать SVG-путь с d3js

У меня очень сложный путь, определяемый стандартной разметкой пера SVG («M 130 30», «L 132, 40» и т. Д.). Как взять эту разметку и создать путь, чтобы я мог сделать весь путь медленно, как описано здесь ?: Can't make paths draw growing slowly with D3 Анимировать SVG-путь с d3js

источник

2013-07-06 victor

Приближенными перечислены в duopixel's answer в этом вопросе по-прежнему работает, даже если <path> узла анимировать не порожденным D3. Вот модифицированная версия duopixel's code с использованием существующего узла SVG пути:

<!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(). Опять же, приспосабливая код дуопикселя:

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

Так что это, кажется, нарисовало все линии одновременно. Я бы хотел, чтобы он рисовал его в том порядке, в котором он указан в пути - рисование по одной строке за раз. Могу ли я сделать это с помощью этого кода? В частности, кажется, что все действия M выполняются в момент времени = 0, а не один за другим. – victor

На самом деле, я думаю, я переведу это на другой вопрос, так как теперь он не связан с этим ... – victor

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

Анимировать SVG-путь с d3js

ответ

Смежные вопросы