[英]Setting pie chart colors using d3.js
我在使用 d3.pieChart 设置饼图切片颜色时遇到问题。 我见过的文档和示例将颜色方法与十六进制颜色数组结合使用。 但是,设置此选项会导致我的饼图变为白色(不可见),并且图例中的每个项目都变为黑色。
我试过将 .colors 与五个颜色的数组和六个颜色的数组一起使用,但问题仍然存在。 这可能是由于 slicesCap 的一些问题吗?
下面的代码片段,但类别 10 灼伤了我的眼睛,所以任何关于实现自定义颜色集的建议都将不胜感激!
pie
.slicesCap(5)
.legend(dc.legend().gap(3))
.colors(d3.scale.category10())
仅传递一组颜色值是行不通的,因为.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); });
您可以将颜色分配给这样的特定值。
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 中的函数似乎会引发错误。
取笑 Tayden 的回答,较新版本的 d3(即“scaleOrdinal”)的语法略有不同
var colorScale = d3.scaleOrdinal()
.domain(["banana", "cherry", "blueberry"])
.range(["#eeff00", "#ff0022", "#2200ff"]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.