Как получить ссылку на элементы SVG (дочерние), вложенные в другой элемент SVG (родительский) с использованием D3?

Question

У меня есть несколько групп (элементы SVG G), вложенные в другую группу, и я хотел бы получить их идентификаторы. Я использовал библиотеку javascript D3 для создания SVG, и код похож на этот.

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') 

Я пытался использовать ChildNodes атрибут, но console.log (outerG [0] .childNodes) дает мне неопределенными. Не удалось найти правильный ответ с помощью Google, может ли кто-нибудь дать мне подсказку, как это сделать?

Answer 1

Это будет работать:

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

См jsFiddle here

Причина вам нужно два вложенных индексов является то, что все настройки сгруппированы в неявном виде. Если вы хотите узнать более глубокие причины этого или хотите лучше понять выбор в целом, см. this article