使用 d3.js 设置饼图颜色

Question

I'm having issues setting pie slice colors using a d3.pieChart. Documentation and examples I've seen use the colors method in combination with an array of hex colors. However, setting this results in my pie chart being colored white (invisible) and every item in the legend becoming black.

I've tried using .colors with an array of five and an array of six colors but the issue persists. Could this be due to some issue with the slicesCap?

Code snippet below, but category10 burns my eyes so any advice on implementing a custom color set would be appreciated!

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

Answer 1

Just passing an array of colour values doesn't work because the .colors() function is expecting a color scale like the one created by d3.scale.category10() . Scales are functions which take input data and return a value; in this case, the returned value is one of 10 colours.

For starters, you could try one of the other d3 built-in colour scales, which don't have as extreme contrast: https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-category20

If none of those suit, you can make your own scale function with

var colorScale = d3.scale.ordinal().range([/*array of hex values */]);

pie.colors(colorScale);

You can create the array yourself or use one of the colorBrewer functions.

If you want to specify particular colours for particular values (instead of just assigning the colours to values in the order they appear) you'll need to (a) specify the domain of the scale as an array of values that matches the order of the range array, and (b) create a helper function that passes in the correct property from your data:

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

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

Answer 2

You can assign colors to particular values like this.

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); });

This solution is a little bit hacky, but I couldn't get it to work using only chart.colorDomain, and calling a function in chart.colors seems to be throwing errors now.

Answer 3

Riffing off Tayden's answer, there is slightly different syntax for newer versions of d3 (ie "scaleOrdinal")

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