Come esportare l'animazione d3.js in cornici vettoriali per creare una sequenza AfterEffects?

Sto creando alcune animazioni di base usando d3.js, come animazioni con grafici a barre che mostrano una transizione tra due serie di dati. In definitiva, voglio portare questa animazione in Adobe AfterEffects da includere come parte di un video più grande. Voglio esportare l'animazione web come una serie di fotogrammi vettoriali (ai o svg o png se necessario) da importare in After Effects o Illustrator. Come posso fare questo? Grazie!Come esportare l'animazione d3.js in cornici vettoriali per creare una sequenza AfterEffects?

fonte

2013-05-01 Carrie

: Sto lavorando a una soluzione basata su questo [esempio] (http://d3export.cancan.cshl.edu/). Fin qui tutto bene. Sto chiamando form.submit usando setInterval() nel mio html, e quindi lo script perl crea un download di file con i dati dal nodo svg. Il problema è che ho bisogno di 30 fotogrammi/file al secondo, e finora non sembra che lo script possa funzionare così velocemente. Se provo a creare 30 file da un'animazione di 1 secondo, nella cartella Download vengono visualizzati solo circa 6 o 7 file. – Carrie

Hai fatto molti più progressi nella tua implementazione? Sto cercando di trovare una soluzione simile, ma finora le soluzioni più vicine che ho trovato utilizzano qualcosa come node.js, PhantomJS, jsdom, ecc. Per salvare SVG creati dinamicamente, ma non penso che siano responsabili delle transizioni. .. (es. [questa soluzione] (http://eng.wealthfront.com/2011/12/converting-dynamic-svg-to-png-with.html)). – t2k32316

Ciao, qualche novità su questo? Voglio anche implementarlo. Forse insieme possiamo fare di più. – VividD

Questo in realtà potrebbe essere abbastanza semplice con il modo in cui d3.js esegue le transizioni! Dato che d3.js cambia direttamente gli elementi DOM per fare le transizioni, puoi semplicemente salvare gli elementi DOM ad ogni 1/30 di secondo. Ecco un esempio completo:

<html> 
    <head> 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    <style> 
     svg { border:1px solid black; } 
    </style> 
    </head> 
    <body> 
    <svg id="svg" width="480" height="240" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <circle cx="100" cy="50" r="40" stroke="black" 
    stroke-width="2" fill="red" /> 
    </svg><br/> 
    <button id="b1" type="button">Animate</button> 
    <script type="text/javascript"> 
     var svg = d3.select("svg"); 
     var b1 = d3.select("#b1"); 
     var duration = 1000; 
     var nTimes = 30; 
     var x = new XMLSerializer(); 
     var n = 0; 
     function outputToConsole() { 
     console.log(x.serializeToString(document.getElementById("svg"))); 
     if(n++ >= 30) 
      return; 
     setTimeout(outputToConsole, 33); // 33 milliseconds is close to 1/30th of a second 
     } 

     b1.on("click", function() { 
     svg.select("circle").transition().duration(duration).attr("cx",150); 
     outputToConsole(); 
     }); 
    </script> 
    </body> 
</html>

L'ultimo passo sarebbe quello di salvare ciascuno di tali elementi SVG pressione forniti in singoli file .svg su disco (anziché semplicemente l'output alla console, come nell'esempio di cui sopra). Non l'ho ancora provato, ma probabilmente si potrebbe usare qualcosa come FileSaver.js. Quindi, facoltativamente, i file .svg potrebbero essere convertiti in file .png usando qualcosa come ImageMagick.

Aggiornamento

fonte

2013-06-26 18:55:01 t2k32316

Nota ImageMagick non converte sempre i file svg correttamente. Vedi [questo post] (http://stackoverflow.com/questions/6068751/svg-converting-using-imagemagick-doesnt-apply-a-translation-correctly) – t2k32316

Ho preso la risposta sopra e ho aggiunto il passaggio finale, per favore controlla il mio bl.ock http://bl.ocks.org/sdbernard/afbb899e60902ad42064 Questo salva lo svg ogni 1/40 di secondo per corrispondere a una frequenza di fotogrammi di 25 fps in After Effects –

Come esportare l'animazione d3.js in cornici vettoriali per creare una sequenza AfterEffects?

risposta

Problemi correlati