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 here

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