Как экспортировать анимацию d3.js в векторные рамки для создания последовательности AfterEffects?

Я создаю некоторые базовые анимации с использованием d3.js, например анимации в виде гистограммы, которые показывают переход между двумя наборами данных. В конечном счете, я хочу включить эту анимацию в Adobe AfterEffects, чтобы включить ее в качестве части более крупного видео. Я хочу экспортировать веб-анимацию в виде серии векторных кадров (ai или svg или png, если необходимо) для импорта в After Effects или Illustrator. Как я могу это сделать? Спасибо!Как экспортировать анимацию d3.js в векторные рамки для создания последовательности AfterEffects?

источник

2013-05-01 Carrie

обновление: Я работаю над решением, основанным на этом [пример] (http://d3export.cancan.cshl.edu/). Все идет нормально. Я вызываю form.submit, используя setInterval() в моем html, а затем скрипт perl создает загрузку файла с данными из узла svg. Проблема в том, что мне нужно 30 кадров/файлов в секунду, и пока это не похоже на то, что скрипт может работать так быстро. Если я попытаюсь сделать 30 файлов из 1-секундной анимации, я получаю только 6 или 7 файлов в папке «Загрузка». – Carrie

Вы сделали намного больше прогресса в своей реализации? Я пытаюсь найти аналогичное решение, но до сих пор самые близкие решения, которые я нашел, используют что-то вроде node.js, PhantomJS, jsdom и т. Д. Для сохранения динамически созданных SVG, но я не думаю, что они учитывают переходы. .. (например, [это решение] (http://www.wealthfront.com/2011/12/converting-dynamic-svg-to-png-with.html)). – t2k32316

Привет, любые новости по этому поводу? Я также хочу это реализовать. Возможно, вместе мы сможем сделать больше. – VividD

На самом деле это может быть довольно просто с тем, как происходит d3.js! Так как d3.js напрямую изменяет элементы DOM для выполнения переходов, вы можете просто сохранить элементы DOM за каждые 1/30 секунды. Вот полный пример:

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

Последний шаг был бы сохранить каждый из этих выводимых элементов SVG в отдельные .svg файлов на диске (а не просто выводим их на консоль, как в приведенном выше примере). Я еще не пробовал, но, вероятно, можно использовать что-то вроде FileSaver.js. Затем, возможно, файлы .svg могут быть преобразованы в .png-файлы, используя что-то вроде ImageMagick.

источник

2013-06-26 18:55:01 t2k32316

Примечание. ImageMagick не всегда правильно конвертирует файлы svg. См. [Этот пост] (http://stackoverflow.com/questions/6068751/svg-converting-using-imagemagick-doesnt-apply-a-translation-correctly) – t2k32316

Я принял ответ выше и добавил последний шаг, пожалуйста, проверьте out my bl.ock http://bl.ocks.org/sdbernard/afbb899e60902ad42064 Это сохраняет svg каждые 1/40-е секунды, чтобы соответствовать частоте кадров в 25 кадров в секунду в After Effects –

Как экспортировать анимацию d3.js в векторные рамки для создания последовательности AfterEffects?

ответ

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