使用d3.js设置饼图颜色

Question

我在使用d3.pieChart设置饼图颜色时遇到了问题。我查看了文档和示例，发现需要使用colors方法以及十六进制颜色数组来设置颜色。然而，我尝试这样做后，饼图变成了白色（不可见），图例中的每个项目都变成了黑色。

我已经尝试使用包含五个和六个颜色的数组来使用.colors方法，但问题仍然存在。这可能是由于slicesCap的某些问题引起的吗？

以下是代码片段，但category10颜色太刺眼了，如果您有关于实现自定义颜色集的建议，将不胜感激！

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

- arami

Answer 1

仅传递颜色值数组是不起作用的，因为.colors()函数期望一个类似于d3.scale.category10()创建的颜色比例尺。比例尺是函数，它接受输入数据并返回一个值；在这种情况下，返回的值是十种颜色之一。

首先，您可以尝试使用其他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); });

- AmeliaBR

---

我应该澄清一下，colorBrewer函数并不是内置于d3中的：它们必须作为单独的javascript文件包含在其中。对于一个静态示例，最简单的方法是使用她的网站来找出十六进制值，然后将它们作为数组写入您的代码中。 - AmeliaBR

pie.colors(function(fruitType){ return colorScale(fruitType); }); — 我用这个方法运行得更好。 - DavidRR

@DavidRR 如果你的数据仅由域中使用的相同值组成，则根本不需要辅助函数。只需使用 pie.colors(colorScale) 即可。 - AmeliaBR

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中的函数似乎现在会引发错误。

- tayden

---

你遇到了什么样的错误？我正在尝试绘制一个 dc.rowChart()，但是出现了错误 负值无效。("-2")。 - J86

Answer 3

借鉴Tayden的回答，对于较新版本的d3（即“scaleOrdinal”），语法略有不同。

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

- user2529589