javascript - D3。加载 SVG 文件并一次只显示一个。褪色/更换问题

Question

我想将 svg 文件加载到一个 div(或其他)中，我什至可以成功地做到这一点 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); });

但是我有一些问题:

1. 一旦您要选择另一个 svg 文件，第一个文件会按原样淡出，但另一个文件会堆叠在下方，直到前一个文件完全消失。如何顺利地将一个 svg 替换为另一个？

2. 如果我继续快速单击 svg“按钮”，div 中会出现多个图表。我可以做一个肮脏的修复，只是检查 svg 是否已经呈现，但我想弄清楚如何以更好的方式解决这个异步更新问题。

谢谢

Answer 1

所以我会做的是:在加载 svg 之后等待进行淡出先前 svg 的过渡，然后等待过渡完成，删除旧的，添加新的并淡入:

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