javascript - 使用 d3.js 的外部 SVG 幻灯片放映

Question

我在部署子文件夹中有 s1、s2、s3、s4、...s40 SVG 图像文件。我想通过光标键控件/鼠标单击部分 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