Question

我有一种情况，我希望用户使用circle pack布局浏览3个不同的数据集。我正在使用Bostock's Zoomable circle packing。

我还添加了3个选项，用于加载数据并创建新节点。这里从这些元素传递出图表。

function 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

碰巧我错误地同时创建了三个独立的圆包布局，一个接一个地混合语句。这是有问题的，因为当您必须选择svg部分时，不同的元素都被选中并错误地附加了不同的事件。

所以我决定将三个实现分开并一个接一个地创建三个布局，只有在每个布局完成之后。这样我保持了部分选择和附加事件等，分开然后在需要时加载它们。

Circle Pack Layout D3 - 删除新数据上的添加节点

1 个答案: