Question

我正在尝试在D3中创建一个条形图，我已经制作了该图，结果证明还可以，但是现在我必须拥有它，以便图中的每个条形都是不同的颜色。现在，它们都是蓝色的，因为我将颜色属性设置为蓝色，但是我想知道如何使每个条形具有不同的颜色。

    var bars = chart.append('g')
    .attr('id', "bars-container");

    bars.selectAll('.bar')
    .data(regions)
    .enter().append("rect")
        .attr('class', "bar")
        .attr('x', function(d){
            return xScale(d.region);
        })
        .attr('y', function(d){
            return yScale(+d.sales); 
        })
        .attr('width', xScale.bandwidth())
        .attr('height', function(d){return barsHeight-yScale(+d.sales);})
        .style('fill', "blue");

    bars.attr('transform', 'translate('+axisMargin+',0)');

Answer 1

一种方法

// Define the following 
 var color = d3.scaleOrdinal(d3.schemeCategory10);//This creates 10 different colors

...
// Where you color the bars use this
.attr("fill", function(d, i){
return color(i);})

您可以通过在d3.scaleOrdinal()内创建颜色数组来控制颜色

如何使用D3创建条形图，其中每个条形都是不同的颜色？

1 个答案: