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/

d3.js嵌套选择我不能建立我的组

1 个答案: