不會更新.each函數中的d3.js元素

Question

我的代碼有效，它顯示我的數據元素，但是在更改我的數據並再次運行相同的代碼後，d3不更新我的SVG元素的文本。我必須刷新整個網站才能更改。

var blackbox= d3.select("#content") 
          .selectAll(".silencer") 
          .data([0]); 

       blackbox.enter() 
        .append("div") 
        .attr("class", "silencer") 
        .attr("id", "silencer"); 

        blackbox.exit().remove(); 

        var box = blackbox.selectAll(".ursa") 
        .data(fraung); 

        box.enter() 
        .append("div") 
        .attr("class", "ursa")      
        .each(function(d) { 

         d3.select(this) 
         .append("svg")     
         .attr("class", "invoker")       
         .each(function(d) { 


          d3.select(this).append("svg:image") 
           .attr("xlink:href", "images/qwer.png") 
           .attr("x", "0") 
           .attr("y", "0") 
           .attr("width", "100") 
           .attr("height", "100") 
           .append("title") 
           .text(function(d) {return (d.name)}); 

         }); 

         d3.select(this).append("div") 
         .attr("class", "chen")    
         .each(function(d) { 


          d3.select(this).append("table") 
          .attr("class", "tab") 
          .each(function(d) { 
           d3.select(this).append("tbody") 
           .each(function(d) { 

            d3.select(this).append("tr") 
            .text(function(d) {return("Name: ")}) 
            .attr("class", "key") 
            .each(function(d) { 
             d3.select(this).append("td") 
             .text(function(d) {return (d.name)}); 
            }); 

           }); 
          }); 
         }); 
       }); 

       box.exit().remove(); 

Answer 1

這聽起來像你加載第二個數據集之前，你的SVG元素不被清除，所以第二個數據集被繪製的第後面。如果唯一改變的是文本，那看起來就像沒有任何事情發生。瀏覽器刷新將清除任何動態繪製的內容。在調用「黑盒子」之前，你可以做這樣的事情來清除「#content」元素中的所有內容，我假定它是你的SVG容器。

if(!d3.select("#content").empty()) d3.select("#content").remove(); 

這將完全刪除SVG容器。所以在加載新數據之前，您必須重新創建它。或者，如果你只是想刪除從SVG容器的子元素，你可以這樣做：

if(!d3.select("#content").selectAll("*").empty()) d3.select("#content").selectAll("*").remove();