I'm looking to insert svg files into a single div and I've managed to do it successfully on this link:
var div_svg = d3.select("div#example");
svg1 = "https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg";
svg2 = "https://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg";
var createSvg = function(dataset) {
d3.xml(dataset)
.mimeType("image/svg+xml")
.get(function(error, xml) {
if (error) throw error;
div_svg.node().append(xml.documentElement);
});
}
update = function(dataset) {
div_svg.select('svg')
.style("opacity", 1)
.transition()
.duration(200)
.style("opacity", 0)
.remove();
createSvg(dataset)
}
createSvg(svg1);
d3.select("#one").on("click", function() { update(svg1); });
d3.select("#two").on("click", function() { update(svg2); });
However, I have encountered some challenges:
When switching to another svg file, the first one fades out but the new one stacks below until the previous one completely disappears. How can I smoothly replace one svg with another?
If I rapidly click the svg "button", multiple graphs appear in the div. I could implement a quick fix by checking if the svg has already been rendered, but I'm seeking a better solution to address this asynchronous update issue.
Appreciate your help!