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/