1
我有s1,s2,s3,s4,... s40部署子文件夹中的SVG图像文件.i想要加载每个图像替换其他借助光标键控制/鼠标点击html文本的一部分。是否可以通过d3.js?幻灯片放映与外部SVG使用d3.js
我有s1,s2,s3,s4,... s40部署子文件夹中的SVG图像文件.i想要加载每个图像替换其他借助光标键控制/鼠标点击html文本的一部分。是否可以通过d3.js?幻灯片放映与外部SVG使用d3.js
是的,它可以使用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
这snipplet正在执行幻灯片只有一个SVG.i试图添加新SVG,但接下来的图像正在追加到前一个。 – kishu