D3。 SVGファイルをロードし、一度に1つだけを表示します。問題

Question

の交換/フェージング私は1つののdiv（または何でも）にSVGファイルをロードしたいと私も成功し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ファイルを選択しようとすると、最初のファイルは消えてしまいますが、もう1つは前に消えるまで下に積み重なります。どのように私は他のスムーズに1つのSVGを置き換えることができますか？

2. 私はsvg "ボタン"をすばやくクリックすると、複数のグラフがdivに表示されます。 SVGがすでにレンダリングされているかどうかを確認するだけで汚れた修正を行うことができましたが、この非同期アップデートの問題をより良い方法で修正する方法を理解したいと思います。

は私がどうなるのかそうあなた

Answer 1

ありがとう：あなたは、prvious 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) 
};