根據數據點的數量更改 d3 可重復使用的圓環圖中的顏色范圍

Question

使用這個可重復使用的圖表作為基礎： 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 。

一切都在一個 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;

新的完整 JSFiddle。