svg - 如何使用 D3 获取对嵌套在另一个 SVG 元素（父）中的 SVG（子）元素的引用？

Question

我有几个组（SVG G 元素）嵌套在另一个组中，我想获得他们的 ID。我使用 D3 javascript 库来创建 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)给了我未定义的。用谷歌搜索找不到正确的答案，请有人给我提示如何做到这一点？

Answer 1

这将起作用：

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

在这里查看jsFiddle

您需要两个嵌套索引的原因是所有选择都被隐式分组。如果您想了解更深层次的原因，或者想更好地了解一般选择，请参阅这篇文章