D3：從嵌套數據

Question

着色多行我目前組裝與數據點內有一定的線圖，從格式化像這樣JSON對象的數組：

var data = [{ 
    "name": "metric1", 
    "datapoints": [ 
     [10.0, 1333519140], 
     [48.0, 1333519200] 
    ] 
}, { 
    "name": "metric2", 
    "datapoints": [ 
     [48.0, 1333519200], 
     [12.0, 1333519260] 
    ] 
}] 

我想有一個顏色爲每個指標，所以我試圖根據數組數據中的對象索引 對它們着色。我現在只是把圓圈中的代碼如下：

// We bind an svg group to each metric. 
var metric_groups = this.vis.selectAll("g.metric_group") 
    .data(data).enter() 
    .append("g") 
    .attr("class", "metric_group"); 

// Then bind a circle for each datapoint. 
var circles = metric_groups.selectAll("circle") 
.data(function(d) { return d.datapoints; }); 

circles.enter().append("circle") 
    .attr("r", 3.5); 

現在，如果我改變，要像最後一位：

circles.enter().append("circle") 
    .attr("r", 3.5); 
    .style("fill", function(d,i) { return i%2 ? "red" : "blue"; } 

我得到交替的紅色和藍色圓圈，因爲可以預期。
以從Nested Selections : 'Nesting and Index'一些建議，我想：

circles.enter().append("circle") 
    .attr("r", 3.5); 
    .style("fill", function(d,i,j) { return j%2 ? "red" : "blue"; } 

不工作（j是不確定的），大概是因爲我們在命名的屬性數據點，而不是一個數組元素。如何在不改變數據結構的情況下去做我想要的着色？謝謝！

Answer 1

在這裏做最簡單的事情是有界繼承父g組件填充樣式：

var color = d3.scale.category20(); 

var metricGroup = vis.selectAll(".metric-group") 
    .data(data) 
    .enter().append("g") 
    .attr("class", "metric-group") 
    .style("fill", function(d) { return color(d.name); }); 

var circle = metricGroup.selectAll("circle") 
    .data(function(d) { return d.datapoints; }) 
    .enter().append("circle") 
    .attr("r", 3.5); 

如果定義明確的顏色爲CSS類，你也可以使用動態類名和繼承方式：

var metricGroup = vis.selectAll(".metric-group") 
    .data(data) 
    .enter().append("g") 
    .attr("class", function(d) { return "metric-group " + color(d.name); }); 

有了相應的CSS：

.metric1 circle { fill: red; } 
.metric2 circle { fill: blue; } 

另一個方法是使用each來訪問父數據：

metricGroup.each(function(p, j) { 
    d3.select(this).selectAll("circle") 
     .data(p.datapoints) 
    .enter().append("circle") 
     .attr("r", 3.5) 
     .style("fill", color(p.name)); 
}); 

我也想到用組索引j會工作;我不確定它爲什麼沒有定義，但在代碼示例中有一個僞分號（在.attr("r", 3.5);中），所以有可能還有其他事情正在進行。無論如何，從數據而不是組索引中派生分類顏色更具慣用性，所以我會使用上述技術之一。

Answer 2

在我的一個可視化中，我遇到了同樣的問題。我的解決辦法是以下的（適合於您的示例）：

var count = 0; 

var color = d3.scale.category20(); 

var metric_groups = this.vis.selectAll("g.metric_group") 
    .data(data).enter() 
    .append("g") 
    .attr("class", "metric_group"); 

var circles = metric_groups.selectAll("circle") 
    .data(function(d) {return d.datapoints;}); 

circles.enter().append("circle") 
    .attr("r", 3.5) 
    .style("fill", function(d,i){ 
    d.number = count; 
    count++; 
    return color(d.number); 
    }); 

的關鍵是要得到的每個數據的唯一屬性，該屬性可以被用於產生相應的元件在不同的基團的獨特顏色。

我希望這有助於或支持您找到類似的解決方案！