D3에 이미지를 동적으로 표시합니다.

Question

일련의 이미지를 애니메이션으로 표시하고 싶습니다. 특정 프레임을 조작하려는 경우를 제외하고는 GIF를 사용하고 싶습니다.

이미지를 SVG 캔버스에 표시 했으므로 이제 xlink:href을 동적으로 변경하고 싶습니다. 나는 이미지의 높이와 같은 속성을 변경하려고하면

function startAnimation(){ 
    c += 1; 
    d3.select(this) 
     .transition() 
     .attr("xlink:href", "images/image-" + c.toString() +".png") 
     .each("end", startAnimation);  
}; 

이 방법은 잘 작동하지만, 속성 xlink:href와 함께 작동하지 않습니다.

동적으로 이미지를 업데이트하는 방법이 있습니까?

Answer 1

애니메이션 시퀀스를 시작하기 전에 이미지를 미리로드하고 캐시해야합니다. 그렇지 않으면 이미지가 느리게로드되며 이미지가로드되는 데 250ms가 걸리는 것은 무리가 아닙니다. 즉 이미지가로드 될 때까지 다음 프레임으로 이동합니다.

HTML 요소의 경우, (new Image) 이미지 객체를 생성하는 src 속성을 설정 한 다음 모든 이미지가 준비가되었을 때 볼로드 이벤트 (onload)를 수신하여 미리로드 할 수 있습니다. 브라우저는 미리 표시된 Image에서 표시된 HTML img 요소의 src을 설정할 때 캐시 된 메모리 이미지를 사용합니다.

이 기술은 SVG 이미지에서 작동하거나 작동하지 않을 수 있습니다. 더 나은 기술은 스프라이트 시트를 사용하는 것입니다. 스프라이트 시트는 애니메이션의 모든 프레임을 단일 이미지로 결합한 다음 클라이언트에서 자릅니다. HTML에서는 일반적으로 배경 위치 스타일을 사용합니다. SVG에서 클리핑 또는 오버플로로 동일한 작업을 수행 할 수 있습니다.

요소를 여러 개 작성한 다음 하나만 제외하고 모두 숨 깁니다 (예 : 불투명 또는 요소를 화면 외부에 배치).

(당신이 속성을 보간되지 않기 때문에 또한, d3.transition하기보다는 애니메이션에서는 setInterval을 사용하는 것이 더 간단 할 수 있습니다.)

Answer 2

nodeEnter.append("svg:image") 
    .attr('x',-9) 
    .attr('y',-12) 
    .attr('width', 15) 
    .attr('height', 24)  
    .attr("xlink:href", function(d) { 
     if(d.Type=="name"){ 
     return "/images/icon-1.png";} 
     else{ 
      return "/images/icon-2.png";} 
      });