Animer un chemin SVG avec d3js

J'ai un chemin très complexe défini avec le balisage SVG standard ("M 130 30", "L 132, 40", etc.). Comment puis-je prendre ce balisage et de créer un chemin pour que je puisse tirer tout le chemin lentement comme décrit ici ?: Can't make paths draw growing slowly with D3 Animer un chemin SVG avec d3js

Source

2013-07-06 victor

Le approché figurant dans duopixel's answer dans cette question fonctionne toujours, même si le nœud <path> à animer n'a pas été générée par D3. Voici une version modifiée de duopixel's code à l'aide d'un noeud de chemin SVG existant:

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

Ou, si vous ne veulent utiliser D3 pour la création du nœud, prenez votre chaîne de chemin existant et de l'utiliser en place de l'appel de fonction line(). Encore une fois, en adaptant le code du 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");

Source

2013-07-06 02:28:42 explunit

Cela semble dessiner toutes les lignes en même temps. Je voudrais qu'il dessine dans l'ordre qu'il est spécifié dans le chemin - dessinant une ligne à la fois. Puis-je faire ça avec ce code? Plus précisément, il semble que toutes les actions M s'exécutent à temps = 0, pas l'une après l'autre. – victor

En fait, je pense que je vais passer à une autre question, car il est maintenant pas lié à cela ... – victor

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

Animer un chemin SVG avec d3js

Répondre

Questions connexes