Slide show with external SVGs using d3.js

Question

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?

Answer 1

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();     

    });

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

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