如何在d3中嵌套选择？

Question

我想用不同的颜色绘制三个连续的方块（这是没有问题的，它在“缩放”变量中），并在每个大颜色下面放置可变数量的小方块（我做不到，“圆点”变量）。我究竟做错了什么？这是我的代码，要点https://gist.github.com/3013836：

var data = [-1,0,1] 

var rect_size = 25; //px 

var x = d3.scale.ordinal().domain(d3.range(data.length)).rangeBands([0, rect_size*data.length]); 
var color = d3.scale.linear().domain([-1.5, 0, 1.5]).range(["#278DD6","#ffffff","#d62728"]).clamp(false); 

var svg = d3.select("body").append("svg") 
    .attr("width", 800) 
    .attr("height", 200) 

scale = svg.selectAll("rect") 
    .data(data) 
    .enter().append("rect") 
    .attr("x", function(d,i) { return x(i); }) 
    .attr("y",0) 
    .attr("width", rect_size) 
    .attr("height", rect_size) 
    .style("fill", function(d) { return color(d); }); 

dots = [[1,2,3],[1,2],[1,2,3,4]] 
var y = d3.scale.ordinal().domain(d3.range(dots.length)).rangeBands([0, (rect_size/2)*dots.length]); 
scale.selectAll("g") 
    .data(dots, function(d){return d;}) 
    .enter().append("rect") 
    .attr("x", function(d,i) {return x(i);}) 
    .attr("y", function(d,i) {return y(i);}) 
    .attr("width", rect_size/2) 
    .attr("height", rect_size/2) 
    .style("fill", "black"); 

Answer 1

您已经定义了选择scale三个矩形元素。然后，你在每个元素中添加了三个更多的矩形元素。所形成的结构，如果你使用浏览器的元素检查员，看起来就像这样：

<rect class="outer"> 
    <rect class="inner"></rect> 
    <rect class="inner"></rect> 
    <rect class="inner"></rect> 
</rect> 

这只能显示三个rects因为rects不container elements在SVG;内部rects被忽略。

如果要分组元素，则需要g (group) element。你想这样的结构：

<g> 
    <rect class="outer"></rect> 
    <rect class="inner"></rect> 
    <rect class="inner"></rect> 
    <rect class="inner"></rect> 
</g> 

您可以先创建一个选择使用data-join克元素做到这一点。然后append单个外部矩形的g元素。最后使用nested join来创建内部rects。喜欢的东西：

var g = svg.selectAll("g") 
    .data(outerData) 
    .enter().append("g"); 

var outerRect = g.append("rect") 
    .attr("class", "outer"); 

var innerRect = g.selectAll(".inner") 
    .data(innerData) 
    .enter().append("rect") 
    .attr("class", "inner"); 

一些其他的东西：

• 您可以使用在G元素的变换，这样你就不必单独放置在外部和内部rects。这样，内部折弯可以相对于外部折弯定位，并且代码更简单。

• 由于您选择了“g”并附加了“rect”，因此您的上一次加入被打破;无论你追加什么，都应该匹配你的选择器

• 除非您还处理更新和退出，否则通常不需要key function与您的数据连接。由于您只处理输入加入，并且您知道选择是空的，所以关键功能是不必要的。