Circle Pack Layout D3 - 刪除新數據上的添加節點

Question

我有一種情況，我希望用戶使用圓形包佈局來瀏覽3個不同的數據集。我正在使用Bostock's Zoomable circle packing。

我已經添加了3個選項，用於加載數據並創建新節點。這裏chartid是從這些元素傳遞的。

function changeDataSet（chartid） { console.log（chartid）; //console.log（節點）;

//add new chart data depending on the selected option 
if(chartid === "plevels") 
{ 
    root = JSON.parse(newKmap_slevels); 
    focus = root; 
    nodes = pack.nodes(root); 
} 
else if (chartid === "pduration") 
{ 
    root = JSON.parse(newKmap_sduration); 
    focus = root; 
    nodes = pack.nodes(root); 
} 
else 
{ 
    root = JSON.parse(newKmap_stype); 
    focus = root; 
    nodes = pack.nodes(root); 
} 

refresh(); 

}

然後，我有刷新功能，但我不understnading如何刪除existting節點，並添加基於新的數據集新的。顯示一些過渡動畫也會很好。

目前我正在嘗試刪除並重新創建初始元素，但當我這樣做時圖表變爲空白。

var refresh = function() { 
    //var nodes = pack.nodes(root); 
    var duration = 10; 
    console.log(nodes); 
    d3.select("#conf_knowledge_map").selectAll("g") 
    .remove(); 

    svg 
    .attr("width", diameter) 
    .attr("height", diameter) 
    .append("g") 
    .attr("transform", "translate(" + diameter/2 + "," + diameter/2 + ")"); 

    circle = svg.selectAll("circle") 
    .data(nodes) 
    .enter().append("circle") 
     .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) 
     .style("fill", function(d) { return d.children ? color(d.depth) : null; }) 
     .on("click", function(d) { 
     if (focus !== d) zoom(d), d3.event.stopPropagation(); 
     }); 

    text = svg.selectAll("text") 
     .data(nodes) 
    .enter().append("text") 
     .attr("class", "label") 
     .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; }) 
     .style("display", function(d) { return d.parent === root ? "inline" : "none"; }) 
     .text(function(d) { 
     //console.log(d); 
     if(d.size) 
     { 
      return d.name + ":" + d.size; 
     } 
     else 
      return d.name; 
     }); 
} 

所以我的問題是如何刪除，然後創建新的節點點擊？

UPDATE

我能夠刪除所有節點，並添加基於新數據的新節點，但現在就點擊放大布局全亂了。變換函數不會以某種方式應用於新節點。

var refresh = function() { 
    svg.selectAll(".node").remove(); 
    svg.selectAll(".label").remove(); 

    var nodes = pack.nodes(root); 
    focus = root; 
    circle = svg.selectAll("circle") 
    .data(nodes) 
    .enter() 
    .append("circle") 
     .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) 
     .attr("r", function(d) { return d.r;}) 
     .attr("cx", function(d) { 
     console.log(d); 
     // if(d.depth === 0) 
     // return 0; 
     // else 
      // return d.x - (diameter/2); 
      return d.x; 
     }) 
     .attr("cy", function(d) { 
      return d.y; 
     }) 
     // .attr("transform", "translate(" + "x" + "," + "y" + ")") 
     .style("fill", function(d) { return d.children ? color(d.depth) : null; }) 
     .on("click", function(d) { 
     // d.x = d.x - (diameter/2); 
     // d.y = d.y - (diameter/2); 
     if (focus !== d) zoom(d), d3.event.stopPropagation(); 
     }); 

    text = svg.selectAll("text") 
    .data(nodes) 
    .enter().append("text") 
     .attr("class", "label") 
     .attr("x", function(d) {return d.x - (diameter/2);}) 
     .attr("y", function(d) {return d.y - (diameter/2);}) 
     .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; }) 
     .style("display", function(d) { return d.parent === root ? "inline" : "none"; }) 
     // .attr("transform", "translate(" + "x" + "," + "y" + ")") 
     .text(function(d) { 
     //console.log(d); 
     if(d.size) 
     { 
      return d.name + ":" + d.size; 
     } 
     else 
      return d.name; 
     }); 

} 

如何轉換新節點到位並使縮放工作正常？

UPDATE 2 將'g'元素附加到圓圈並正確顯示所有節點和文本之後，現在變換正常工作。現在唯一的問題是，當我點擊圈子時變焦不起作用！

 circle = svg.selectAll("circle") 
    .data(nodes) 
    .enter() 
    .append("circle") 
     .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) 
     .attr("r", function(d) { return d.r;}) 
     .attr("cx", function(d) { 
     if(d.depth === 0) 
      return 0; 
     else 
      return d.x - (diameter/2); 
     }) 
     .attr("cy", function(d) { 
     if(d.depth === 0) 
      return 0; 
     else 
      return d.y - (diameter/2); 
     }) 
     .style("fill", function(d) { return d.children ? color(d.depth) : null;}) 
     .on("click", function(d) { 
     if (focus !== d) zoom(d); d3.event.stopPropagation(); 
     }) 
     .append("g") 
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) 
     ; 

如何使變焦工作？

Answer 1

恰巧我犯了一個錯誤，就是同時創建三個獨立的圓包佈局，一個接一個地混合陳述。這是有問題的，因爲當你必須選擇svg部分時，不同的元素都被選中並錯誤地附加了不同的事件。

因此，我決定將三個實現分開，並在每個完成之後一個接一個地創建三個佈局。這樣我就保留了部分選擇和附加事件等，分開，然後在需要時加載它們。