取決於數據點

Question

的使用這種可重複使用的圖表爲基礎的數字更改顏色範圍內的D3可重複使用的圓環圖中：http://bl.ocks.org/nnattawat/9368297

我試圖找到一種方法來改變基於數量的顏色範圍設定弧（大小），而不必重寫主甜甜圈（）。例如，一個甜甜圈getData大小爲2（顏色爲綠色和灰色），另一個甜甜圈getData大小爲3（現在刪除灰色並將顏色更改爲綠色，紅色和黃色）。

我不能從甜甜圈（）中刪除顏色，所以我試圖找到一種方法來將顏色與特定的數據點關聯起來，但是我無法用這個模板弄清楚。

編輯：指定已完成的代碼更改。

我有6個不同的getData功能，大致如下：

var getFirstDonutData = function() { 
    var size = 2; 
    var data = [firstData1, firstData2]; 
    var text = ""; 
    d3.select("#data"); 
    return data; 
}; 

var getSecondDonutData = function() { 
    var size = 3; 
    var data = [secondData1, secondData2, secondData3]; 
    var text = ""; 
    d3.select("#data"); 
    return data; 
}; 

var getThirdDonutData = function() { 
    var size = 2; 
    var data = [thirdData1, thirdData2]; 
    var text = ""; 
    d3.select("#data"); 
    return data; 
}; 

然後將以下的6種不同的：

var twoPointDonut = donut() 
       .$el(d3.select("#twoPointDonut ")) 
       .data(getFirstDonutData()) 
       .render(); 

var threePointDonut = donut() 
       .$el(d3.select("#threePointDonut ")) 
       .data(getSecondDonutData()) 
       .render(); 

var otherTwoPointDonut = donut() 
       .$el(d3.select("#otherTwoPointDonut ")) 
       .data(getThirdDonutData()) 
       .render(); 

Answer 1

弧的填充由color()功能在這條線確定：

.style("fill", function(d) { return color(d.data.key); }); 

而不是使用函數，我們可以從基於索引的顏色數組。修改上面的行以讀取：

.style("fill", function(d, i) { return color[i]; }); 

現在我們需要根據數據點數（數據對象中的鍵數）更改可用顏色列表。上述color()功能，添加：

var dataSize = Object.keys(getData()).length 
var color = d3.scale.category20(); // This line was already here 

最後，我們需要將color變量從一個功能改變爲數組。該數組將根據dataSize而有所不同，因此switch聲明在此處很有用。替換顏色定義：

var color; 

switch (dataSize) { 
    case 2: 
    color = ['green' , 'gray']; 
    break; 
    case 3: 
    color = ['green', 'red', 'yellow']; 
    break; 
} 

當只有兩個數據點時，這會給你綠色和灰色;當有3個數據點時爲綠色，紅色和黃色。您可以爲更多數據點添加更多case。

Everything in one JSFiddle.

有兩個數據點：

有三個數據點：

---

編輯：由於您使用一個以上的圖表，並設置在同一頁上的數據，你需要把這個整個塊移動到內的Object.render()功能：

var dataSize = Object.keys(getData()).length; 
var color; 

switch (dataSize) { 
    case 2: 
    color = ['green' , 'gray']; 
    break; 
    case 3: 
    color = ['green', 'red', 'yellow']; 
    break; 
} 

，然後更改dataSize變量獲得在data對象的關鍵傳遞的長度：

var dataSize = Object.keys(data).length; 

New complete JSFiddle.