d3.js - 추가 요소 선택

Question

단일 최상위 그룹 내에 중첩 된 모든 요소를 ​​갖기 위해 노력하고 있습니다. 나는 D3의 선택이 추가 된 마지막 요소입니다 생각하지만 난 할 때 :

svg 
    .attr("width", vizW + margin.left + margin.right) 
    .attr("height", vizH + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

내가이 얻을 :

어떻게 선택 등의 그룹이 아닌 SVG 자체를 할 수 있습니다 ?

var viewport = svg.append('g') 

환호

:

감사

Answer 1

그럼 난 내가 그냥 별도로 선언 할 수있는 선택으로 그룹을하기 위해서는

, 조금 파고했다 추측

Answer 2

당신이 옳다고 생각한 것 - 마지막 선택 요소가 추가되었습니다.

var outer_g = svg 
    .attr("width", vizW + margin.left + margin.right) 
    .attr("height", vizH + margin.top + margin.bottom) 
.append("g") // this will cause the outer 'g' selection to be returned 
    .attr('class', 'outer_g') 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var inner_gs = outer_g.selectAll('.inner_g') 
    .data(the_data) 
    .enter() 
.append('g') // this will cause 'inner_gs' to hold a selection of the inner 'g' elements 
    .attr('class', 'inner_g); 

이 당신이

를 원하는 구조를 만드는 것입니다

그래서 둥지에 부모 g 내부 g 요소 싶은 것은 이것이다