A d3.select... equivalent to jQuery.children()

Question

I'm using d3 to append some elements on enter() and then update them later. However, the next time i try to select those elements the selection is much larger than the original. This is because the original selection elements now have children that are the same type e.g.; <g>, <svg>. I expected selectAll() to only work at the first decedent level like jQuery.children() is there an equivalent in d3? If not whats the most efficient way to shim that?

Answer 1

There's no equivalent to jQuery.children(). This is usually handled by assigning a distinguishing class to the elements you want to select together, e.g. something like this.

svg.selectAll("g").data(data)
   .enter()
   .append("g")
   .attr("class", "parent")
   .append("g")
   .attr("class", "child");

svg.selectAll("g"); // all g elements
svg.selectAll("g.parent"); // only parents
svg.selectAll("g.child"); // only children

Answer 2

Here is a much better way to do it:

var parent = d3.selectAll(".myParentClass");
parent.each(function(d,i) {            
   var children = d3.selectAll(this.childNodes);
   console.log(children);
});

This way you don't need to unnecessarily add classes to what could be 100's of (or even more) child nodes.