Bu aslında d3.js'nin geçişleri ile oldukça basit olabilir! D3.js, geçiş yapmak için DOM öğelerini doğrudan değiştirdiğinden, DOM öğelerini saniyenin 1/30'unda kolayca kaydedebilirsiniz. İşte tam örnek:
<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>
son adım diskte bireysel .svg dosyalarına olanlar outputted svg elemanlarının her kurtarmak olacaktır (bunun yerine sadece yukarıdaki örnekte olduğu gibi konsola çıktılamayıp). Henüz denemedim, ama muhtemelen FileSaver.js gibi bir şey kullanabilir. Sonra isteğe bağlı olarak .svg dosyaları ImageMagick gibi bir şey kullanarak .png dosyalarına dönüştürülebilir.
Güncelleme: Bu [örnek] 'e dayalı bir çözüm üzerinde çalışıyorum (http://d3export.cancan.cshl.edu/). Çok uzak çok iyi. Benim html setInterval() kullanarak form.submit çağırıyorum ve sonra perl betiği svg düğümünden veri ile bir dosya indirme oluşturur. Sorun şu ki, saniyede 30 kareye/dosyaya ihtiyacım var ve şu ana kadar betik bu kadar hızlı çalışabiliyor gibi görünmüyor. 1 saniyelik bir animasyondan 30 dosya yapmaya çalışırsam, sadece İndirme klasörümde yaklaşık 6 veya 7 dosya ile sonuçlanır. – Carrie
Uygulamanızda çok daha fazla ilerleme kaydettiniz mi? Ben benzer bir çözüm bulmaya çalışıyorum, ama şimdiye kadar bulduğum en yakın çözümler, dinamik olarak oluşturulmuş SVG'leri kaydetmek için node.js, PhantomJS, jsdom, vb. Gibi bir şey kullanırlar, ama geçişleri açıkladıklarını sanmıyorum. .. (örneğin [bu çözüm] (http://eng.wealthfront.com/2011/12/converting-dynamic-svg-to-png-with.html)). – t2k32316
Merhaba, bu konuda herhangi bir haber var mı? Bunu da uygulamak istiyorum. Belki birlikte daha fazlasını yapabiliriz. – VividD