javascript - 使用 d3.js 设置饼图颜色

Question

我在使用 d3.pieChart 设置饼图切片颜色时遇到问题。我看到的文档和示例将颜色方法与十六进制颜色数组结合使用。但是，设置此结果会导致我的饼图变成白色(不可见)，而图例中的每个项目都变成黑色。

我已经尝试将 .colors 与五色数组和六色数组一起使用，但问题仍然存在。这可能是由于 slicesCap 的某些问题造成的吗？

下面的代码片段，但 category10 令我眼花缭乱，所以任何有关实现自定义颜色集的建议都将不胜感激!

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) 将比例域指定为与范围数组的顺序，以及 (b) 创建一个辅助函数，从您的数据中传入正确的属性:

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

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