Javascript d3.js-带嵌套g节点的圆形包布局

我正在尝试实现循环打包示例：-但我希望它使用嵌套的“g”节点，以便更容易设置每个循环的子节点的样式并控制其可见性-但在本例中，所有节点在dom中的深度相同。我该如何筑巢？或者，如果不嵌套，如何仅选择圆的直接子对象（不是所有圆的所有子对象）。我目前修改了示例，添加了一个具有对象深度的类，如下所示：

d3.json("skills.json", function(error, root) {
  var node = svg.datum(root).selectAll(".node")
    .data(pack.nodes)
    .enter().append("g")
      .attr("class", function(d) { return "node node"+ d.depth; })

现在我要做的是：

d3.selectAll(".node1").on("mouseover",function(){
    d3.select(this).classed("active",true).//SELECT ALL CHILDREN OF THE HOVERED NODE HERE

---

有人有什么想法吗？

在

打包数据之后，我想不出一种嵌套g元素的方法，所以这里有一个不太优雅的解决方案：

  function checkParent(d, w) {
      if(!d.parent) return false;

      if(d.parent == w) {
        return true;
      } else {
        return checkParent(d.parent, w);
      }
  }

  node.on("mouseover",function(d){
      d3.select(this).classed("active",true);
      d3.selectAll(".node")
          .filter(function(w){ return checkParent(w, d); })
          .classed("active",true);
  });

  node.on("mouseout",function(d){
      d3.select(this).classed("active",false);
      d3.selectAll(".node")
          .filter(function(w){ return checkParent(w, d); })
          .classed("active",false);
  });

在
打包数据后，我无法想出嵌套g元素的方法，因此这里有一个不太优雅的解决方案：

  function checkParent(d, w) {
      if(!d.parent) return false;

      if(d.parent == w) {
        return true;
      } else {
        return checkParent(d.parent, w);
      }
  }

  node.on("mouseover",function(d){
      d3.select(this).classed("active",true);
      d3.selectAll(".node")
          .filter(function(w){ return checkParent(w, d); })
          .classed("active",true);
  });

  node.on("mouseout",function(d){
      d3.select(this).classed("active",false);
      d3.selectAll(".node")
          .filter(function(w){ return checkParent(w, d); })
          .classed("active",false);
  });

谢谢-“w”变量代表什么？“w”是数据节点对象；与外部上下文中的“d”类似，但它们需要使用不同的名称。谢谢，“w”变量代表什么？“w”是数据节点对象；与外部上下文中的“d”类似，但它们需要使用不同的名称。问得好，我认为你应该对答案感到满意。问得好，我认为你应该对答案感到满意。