Dies kann tatsächlich ziemlich einfach mit der Art sein, wie d3.js Übergänge macht! Da d3.js die DOM-Elemente für Übergänge direkt verändert, können Sie die DOM-Elemente einfach jede 1/30 Sekunde speichern. Hier ist ein komplettes Beispiel:
<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>
Der letzte Schritt jeden dieser ausgegebenen svg Elemente in einzelne .svg-Dateien auf der Festplatte zu speichern wäre (statt nur sie an die Konsole wie in dem obigen Beispiel der Ausgabe). Ich habe es noch nicht versucht, aber wahrscheinlich könnte man etwas wie FileSaver.js verwenden. Dann optional die .svg-Dateien könnten in. Png-Dateien mit etwas wie ImageMagick umgewandelt werden.
update: Ich arbeite an einer Lösung basierend auf diesem [Beispiel] (http://d3export.cancan.cshl.edu/). So weit, ist es gut. Ich rufe form.summit mit setInterval() in meinem HTML auf, und dann erstellt das Perl-Skript einen Dateidownload mit den Daten vom Svg-Knoten. Das Problem ist, dass ich 30 Frames/Dateien pro Sekunde benötige, und bisher sieht es nicht so aus, als könnte das Skript so schnell arbeiten. Wenn ich versuche, aus einer 1-Sekunden-Animation 30 Dateien zu machen, dann habe ich nur etwa 6 oder 7 Dateien in meinem Download-Ordner. – Carrie
Haben Sie bei Ihrer Implementierung viel mehr Fortschritte gemacht? Ich versuche, eine ähnliche Lösung zu finden, aber bisher verwenden die nächsten Lösungen, die ich gefunden habe, etwas wie node.js, PhantomJS, jsdom, etc., um dynamisch erstellte SVGs zu speichern, aber ich glaube nicht, dass sie Übergänge berücksichtigen. .. (zB [diese Lösung] (http://eng.wealthfront.com/2011/12/converting-dynamic-svg-to-png-with.html)). – t2k32316
Hallo, irgendwelche Neuigkeiten dazu? Ich möchte das auch umsetzen. Vielleicht können wir zusammen mehr tun. – VividD