d3.js 중첩 선택 내 그룹을 만들 수 없습니다.

Question

중첩 선택을 사용하고 싶습니다. 나는 이미 Nested Selection tutorial을 읽었습니다. 하지만 이해가 안됩니다.

이 같은 그룹이 필요합니다.

<g> 
    <text>name</text> 
    <rect>FAVORABLENESS bar</rect> 
    <rect>FRIENDLINESS bar</rect> 
</g> 
<g> 
    <text>name</text> 
    <rect>FAVORABLENESS bar</rect> 
    <rect>FRIENDLINESS bar</rect> 
</g> 

코드 :

var svg = d3.select("body").append("svg").attr("height",h).attr("width",w); 
var groups = svg.selectAll("g").data(data).enter().append("g"); 

내가 어떻게 갈까요?

내 데이터는

[ 
{ 
    "name":"SeHyeon", 
    "FAVORABLENESS":[ 
    { 
     "myphoto_like":0, 
     "myphoto_comment":0, 
     "myWall_like":0, 
    } 
    ], 
    "FRIENDLINESS":[ 
    { 
     "myphoto_tag":0, 
     "myWall_nametag":0, 
    } 
    ] 
}, 
.... 
] 

Answer 1

var d = [ 
{ 
    "name":"SeHyeon", 
    "FAVORABLENESS":[ 
    { 
     "myphoto_like":0, 
     "myphoto_comment":0, 
     "myWall_like":0, 
    } 
    ], 
    "FRIENDLINESS":[ 
    { 
     "myphoto_tag":0, 
     "myWall_nametag":0, 
    } 
    ] 
} 
]; 

var svg = d3.select(".container") 
    .append("svg") 
    .attr("width", 300) 
    .attr("height", 300); 

var g = svg.selectAll("g") 
    .data(d) // jon elements of d to generate d.length g 
    .enter().append("g") 
.attr("data-name", function (d) { return d.name; }); 

var fav = g.selectAll(".fav") 
    .data(function (d) { return d.FAVORABLENESS; }) 
    .enter().append("rect") 
    .attr("class", "fav"); 

var fri = g.selectAll(".fri") 
    .data(function (d) { return d.FRIENDLINESS; }) 
    .enter().append("rect") 
    .attr("class", "fri"); 

D3의 두 기사는 기사

http://bost.ocks.org/mike/selection/

http://bost.ocks.org/mike/nest/

당신이 그것을 반복 읽을 수 있도록 완벽한 선택과 운동을 설명입니다 나는 간단한 샘플을 써 넣는다. 네스트 선택 및 데이터 결합을 설명하는 데이터

브라우저 개발 도구를 사용하여 dom 구조를 검사 할 수 있습니다.

http://jsfiddle.net/6PZ3t/