How to get a link to SVG (child) elements nested in another SVG (parent) element using D3?

Question

I have several groups (SVG G elements) nested in another group, and I would like to get their identifiers. I used the JavaScript D3 library to create SVG, and the code is similar to this.

var body = d3.select("body"); var svg = body.append("svg") .attr("width", '100%') .attr("height", '100%') var outerG = svg.append("g") .attr('id','outerG') var innerG1 = outerG.append('g') .attr('id','innerG1') var innerG2 = outerG.append('g') .attr('id','innerG2') 

I tried using the childNodes attribute, but console.log (outerG [0] .childNodes) gives me undefined. Could not find the correct answer using Google, can someone give me a hint how to do this?

Answer 1

This will work:

 console.log(outerG[0][0].childNodes); 

See jsFiddle here

The reason you need two nested indexes is because all selections are grouped implicitly. If you want to know the deeper reasons for this, or want to better understand the choice as a whole, see this article.