我在使用d3.pieChart设置饼图切片颜色时遇到问题.我见过的文档和示例使用colors方法结合十六进制颜色数组.但是,设置此结果会导致我的饼图变为白色(不可见),并且图例中的每个项目都变为黑色.
我尝试使用五个数组和六种颜色数组的.colors但问题仍然存在.这可能是由于sliceCap的一些问题吗?
下面的代码片段,但类别10让我眼前一亮,所以任何有关实现自定义颜色集的建议都会受到赞赏!
pie .slicesCap(5) .legend(dc.legend().gap(3)) .colors(d3.scale.category10())
AmeliaBR.. 18
只传递颜色值数组不起作用,因为.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); });
PS我应该澄清colorBrewer函数不是内置到d3:它们必须作为[单独的javascript文件]包含(https://github.com/mbostock/d3/blob/master/lib/colorbrewer/ colorbrewer.js).对于一个静态示例,最简单的方法是使用她的网站来计算十六进制值,然后将它们作为数组写入代码中. (2认同)
tayden.. 7
您可以为这些特定值指定颜色.
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中调用函数似乎现在抛出错误.
只传递颜色值数组不起作用,因为.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); });
您可以为这些特定值指定颜色.
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中调用函数似乎现在抛出错误.