score:0

Based on your comment above, it looks like you’re looking for d3’s scaleThreshold scale.

It maps a continuous domain to a discreet range. The length of the range has to be the length of the domain + 1. The domain is a series of thresholds, so you’d have

var colorScale = d3.scaleThreshold()
    .domain([8.5, 9.5])
    .range(["blue", "red", "orange"]);

So now colorScale(0)blue, colorScale(9)red, and colorScale(9.7)orange.

score:1

In your example, the color is set in the render function

 .attr('fill', function(d, i) {
    return config.arcColorFn(d * i);
 })

If you want to use an array of colors, you should change this function :

var colors = ['blue', 'red', 'orange', 'yellow', 'black'];

...
// in the render function
.attr('fill', function(d, i) {
    return colors[i]
})

Related Query

More Query from same tag