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

Question

我有一種情況，我希望用戶使用Circle Pack布局瀏覽3個不同的數據集。 我正在使用Bostock的Zoomable圓形包裝 。

我另外添加了3個選項，這些選項可加載數據並創建新節點。 在這里，Chartid從這些元素傳遞。

函數changeDataSet（chartid）{console.log（chartid）; //console.log(nodes）;

//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();

}

然后，我具有刷新功能，但是我並不了解如何刪除現有節點，並根據新數據集添加新節點。 顯示一些過渡動畫也很好。

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

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

所以我的問題是如何在單擊時刪除然后創建新節點？

更新

我能夠刪除所有節點，並基於新數據添加新節點，但是現在單擊以放大布局時，一切都搞砸了。 轉換功能無法以某種方式應用於新節點。

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

}

如何將新節點轉換到適當的位置並使縮放正常工作？

更新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

碰巧我犯了一個錯誤，即同時創建三個獨立的Circle Pack布局，一個接一個地混合語句。 這是有問題的，因為當您必須選擇svg部分時，會同時選擇不同的元素並錯誤地附加了不同的事件。

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