Question

我在部署子文件夹中有s1，s2，s3，s4，... s40 SVG图像文件。我希望通过光标键控制/鼠标点击部分html文本来加载每个图像并替换其他图像.Is可以通过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

使用d3.js使用外部SVG进行幻灯片放映

1 个答案: