d3.js 애니메이션을 벡터 프레임으로 내보내 AfterEffects 시퀀스를 만드는 방법은 무엇입니까?

저는 두 세트의 데이터 사이에 전환을 보여주는 막대 차트 애니메이션과 같은 d3.js를 사용하여 몇 가지 기본 애니메이션을 만듭니다. 궁극적으로이 애니메이션을 Adobe AfterEffects로 가져와 더 큰 비디오의 일부로 포함하려고합니다. After Effects 나 Illustrator로 가져 오기 위해 일련의 벡터 프레임 (ai 또는 svg 또는 필요한 경우 png)으로 웹 애니메이션을 내보내려고합니다. 어떻게해야합니까? 감사합니다.d3.js 애니메이션을 벡터 프레임으로 내보내 AfterEffects 시퀀스를 만드는 방법은 무엇입니까?

출처

2013-05-01 Carrie

업데이트 :이 [예제] (http://d3export.cancan.cshl.edu/)를 기반으로하는 해결책을 찾고 있습니다. 여태까지는 그런대로 잘됐다. 내 HTML에서 setInterval()을 사용하여 form.submit을 호출하고 나서 perl 스크립트가 svg 노드의 데이터와 함께 파일 다운로드를 만듭니다. 문제는 초당 30 프레임/파일이 필요하며 지금까지는 스크립트가 그렇게 빠르게 작동하지 않는 것처럼 보입니다. 1 초 애니메이션에서 30 개의 파일을 만들려고하면 내 다운로드 폴더에 약 6 ~ 7 개의 파일로 끝납니다. – Carrie

구현에서 훨씬 더 진전을 보았습니까? 비슷한 솔루션을 찾으려고하지만, 내가 찾은 가장 근접한 솔루션은 동적으로 생성 된 SVG를 저장하기 위해 node.js, PhantomJS, jsdom 등과 같은 것을 사용하지만, 전환을 고려하지는 않습니다. .. (예 : [this solution] (http://eng.wealthfront.com/2011/12/converting-dynamic-svg-to-png-with.html)). – t2k32316

안녕하세요, 어떤 소식이 있습니까? 나는 이것을 구현하고 싶다. 아마도 함께하면 더 많은 일을 할 수 있습니다. – VividD

실제로 이것은 d3.js가 전환되는 방식으로 매우 간단 할 수 있습니다! d3.js는 전환을 수행하기 위해 DOM 요소를 직접 변경하므로 각 1/30 초에 DOM 요소를 저장하면됩니다. 여기에 완벽한 예입니다

<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 파일을 ImageMagick과 같은 것을 사용하여 .png 파일로 변환 할 수 있습니다.

출처

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 bl.ock http://bl.ocks.org/sdbernard/afbb899e60902ad42064 이렇게하면 After Effects에서 25fps의 프레임 속도에 해당하는 1/48 초마다 svg가 저장됩니다 –

d3.js 애니메이션을 벡터 프레임으로 내보내 AfterEffects 시퀀스를 만드는 방법은 무엇입니까?

답변

관련 문제