幻燈片放映與外部SVG使用d3.js

Question

我有s1，s2，s3，s4，... s40部署子文件夾中的SVG圖像文件.i想要加載每個圖像替換其他藉助光標鍵控制/鼠標點擊html文本的一部分。是否可以通過d3.js？

Answer 1

是的，它可以使用d3.js.

// There are probably better ways of loading the SVG, but this is one example I found 

    d3.xml("test.svg", "image/svg+xml", function(xml) { 
     d3.select("body").node().appendChild(xml.documentElement); 

     svg=d3.select("body").select("svg"); 
      console.log(svg[0][0]) 
     slides = svg_slides(svg,1500); 
     setTimeout(function() { svg_interact(svg);console.log("OK")},100); 


     // Lets test the slide scales - put a bouncing ball on slide id 3 
     s = slides[3]; 
     circle = svg.append("svg:circle") 
      .attr("cx",s.scale_x(500)).attr("cy",s.scale_y(500)) 
      .attr("r",20) 
      .style("fill","steelblue"); 

     next = 500;     

     function bounce() { 
      next = -next; 
      circle.transition().duration(2500).attr("cx",s.scale_x(500+next)) 
      .each("end",bounce); 
     } 
     bounce();  

    }); 

看到這裏演示.. http://bl.ocks.org/ZJONSSON/raw/1254855/

您可以在這裏找到詳細的說明和代碼片斷.. http://bl.ocks.org/ZJONSSON/1254855