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？

2. 如果我繼續快速點擊svg「按鈕」，多個圖形出現在div中。我可以做一個骯髒的修復，只是檢查svg已被渲染，但我想弄清楚如何以更好的方式解決這個異步更新問題。

謝謝

Answer 1

所以，我會做：等待你的已加載SVG做褪色prvious 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) 
};