使用d3.js使用外部SVG进行幻灯片放映 [英] Slide show with external SVGs using d3.js

问题描述

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

I have s1,s2,s3,s4,...s40 SVG image files in deployment subfolder .i want to load each image with replacing other with the help of cursor key controls/mouse clicks on parts of html text.Is it possible through d3.js?

推荐答案

是的，可以使用d3.js.

Yes it is possible using 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/

See the demo here.. http://bl.ocks.org/ZJONSSON/raw/1254855/

你可以在此处查找详细说明和代码段。 http://bl.ocks.org/ZJONSSON/1254855

You can find the detailed explanation and code snippet here.. http://bl.ocks.org/ZJONSSON/1254855

这篇关于使用d3.js使用外部SVG进行幻灯片放映的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！