Question

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

我尝试使用五个数组和六种颜色数组的.colors但问题仍然存在。这可能是由于sliceCap的一些问题吗？

下面的代码片段，但是类别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）将比例的域指定为与之匹配的值的数组范围数组的顺序，以及（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); });

这个解决方案有点hacky，但是我无法仅使用chart.colorDomain来工作，并且在chart.colors中调用函数似乎现在抛出错误。

Answer 3

根据 Tayden 的回答，较新版本的 d3（即“scaleOrdinal”）的语法略有不同

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

使用d3.js设置饼图颜色

3 个答案: