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部分时，会同时选择不同的元素并错误地附加了不同的事件。

因此，我决定将这三个实现分开，并在每个完成后再创建三个布局。 这样，我保留了部分选择和附加事件等，分开，然后在需要时加载它们。