javascript - D3. Load SVG files and show only one at a time. Fading/Replacing issue -
i load svg files 1 div (or whatever) , can here:
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); }); but have issues:
once choose svg file, first 1 fades off should, 1 stacks below until previous disappear @ all. how can replace 1 svg smoothly?
if continue clicking on svg "button" quickly, more 1 graph appear in the div. make dirty fix, checking svg has been rendered already, figure out how fix asynchronous update issue in better way.
thank you
so do: wait after have loaded svg transition fade prvious svg, wait transition finish, remove old one, add new 1 , fade in :
var createsvg = function(dataset) { d3.xml(dataset) .mimetype("image/svg+xml") .get(function(error, xml) { d3.select("#example") .select('svg') .style("opacity", 1) .transition() .duration(200) .style("opacity", 0); settimeout(function(){ d3.select("#example") .select('svg').remove(); div_svg.node().append(xml.documentelement); d3.select("#example") .selectall('svg') .select('svg') .style("opacity", 0) .transition() .duration(200) .style("opacity", 1); }, 200); if (error) throw error; }); }; update = function(dataset) { createsvg(dataset) };
Comments
Post a Comment