Làm cách nào để tham chiếu đến phần tử SVG (con) được lồng trong phần tử SVG khác (cha mẹ) bằng D3?

Question

Tôi có một số nhóm (phần tử SVG G) được lồng trong một nhóm khác và tôi muốn nhận ID của họ. Tôi đã sử dụng thư viện javascript D3 để tạo SVG và mã trông giống như thế này.

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

Tôi cố gắng để sử dụng childNodes thuộc tính, nhưng console.log (outerG [0] .childNodes) mang lại cho tôi không xác định. Không thể tìm thấy câu trả lời đúng tìm kiếm với google, có thể vui lòng ai đó đưa cho tôi một gợi ý làm thế nào để làm điều đó?

Answer 1

này sẽ làm việc:

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

Xem jsFiddle here

Lý do bạn cần hai chỉ số lồng nhau là tất cả các lựa chọn được nhóm ngầm. Nếu bạn muốn biết lý do sâu sắc hơn về điều này hoặc muốn hiểu lựa chọn tốt hơn nói chung, hãy xem this article