如何在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與您的數據連接。由於您只處理輸入加入，並且您知道選擇是空的，所以關鍵功能是不必要的。