使用 d3.js 設置餅圖顏色

Question

我在使用 d3.pieChart 設置餅圖切片顏色時遇到問題。 我見過的文檔和示例將顏色方法與十六進制顏色數組結合使用。 但是，設置此選項會導致我的餅圖變為白色（不可見），並且圖例中的每個項目都變為黑色。

我試過將 .colors 與五個顏色的數組和六個顏色的數組一起使用，但問題仍然存在。 這可能是由於 slicesCap 的一些問題嗎？

下面的代碼片段，但類別 10 灼傷了我的眼睛，所以任何關於實現自定義顏色集的建議都將不勝感激！

pie
    .slicesCap(5)
    .legend(dc.legend().gap(3))
    .colors(d3.scale.category10())

Answer 1

僅傳遞一組顏色值是行不通的，因為.colors()函數需要一個類似於d3.scale.category10()創建的色標。 秤是其采取輸入數據和返回值的函數; 在這種情況下，返回值是 10 種顏色之一。

對於初學者，您可以嘗試其他 d3 內置色階之一，它們沒有極端的對比度： https : //github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-category20

如果這些都不適合，您可以使用自己的比例功能

var colorScale = d3.scale.ordinal().range([/*array of hex values */]);

pie.colors(colorScale);

您可以自己創建數組或使用colorBrewer函數之一。

如果要為特定值指定特定顏色（而不是僅按照它們出現的順序將顏色分配給值），則需要 (a) 將比例域指定為與順序匹配的值數組range 數組，以及 (b) 創建一個輔助函數，該函數從您的數據中傳入正確的屬性：

var colorScale = d3.scale.ordinal().domain(["banana", "cherry", "blueberry"])
                                   .range(["#eeff00", "#ff0022", "#2200ff"]);

pie.colors(function(d){ return colorScale(d.fruitType); });

Answer 2

您可以將顏色分配給這樣的特定值。

var colorScale = d3.scale.ordinal()
   .domain(["banana", "cherry", "blueberry"])
   .range(["#eeff00", "#ff0022", "#2200ff"]);

pie.colors(colorScale.range())
   .colorAccessor(function(d){ return colorScale.domain().indexOf(d.fruitType); });

這個解決方案有點笨拙，但我無法僅使用chart.colorDomain 使其工作，並且現在調用chart.colors 中的函數似乎會引發錯誤。

Answer 3

取笑 Tayden 的回答，較新版本的 d3（即“scaleOrdinal”）的語法略有不同

var colorScale = d3.scaleOrdinal()
   .domain(["banana", "cherry", "blueberry"])
   .range(["#eeff00", "#ff0022", "#2200ff"]);