d3.js - circle pack layout with nested g nodes

Question

I'm trying to implement the circle packing example: http://bl.ocks.org/4063530 - but I want it to use nested "g" nodes so it's easier to style and control visibility of children of each circle - but in this example, all nodes are at the same depth in the dom. How do I nest them? Or, if not nesting, how do I select only the direct children of a circle (not all children of all circles). I've currently modified the example to add a class with the object's depth, like this:

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

and now want to do this:

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

Anyone have any ideas?

Answer 1

I could not come up with a way of nesting g elements after packing the data, so here is a not so elegant solution:

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

http://bl.ocks.org/4771875