如何使条在d3中具有不同的颜色？

【问题标题】：How to make bars have different colors in d3?如何使条在d3中具有不同的颜色？
【发布时间】：2020-11-09 20:27:57
【问题描述】：

我试图让我的酒吧在 d3 中具有不同的颜色。尝试了下一个代码，但没有成功：

var color = d3.scaleOrdinal([`#383867`, `#584c77`, `#33431e`, `#a36629`, `#92462f`, `#b63e36`, `#b74a70`, `#946943`]);
    
    
var rectGrp=svg.append("g")
    .attr('transform','translate('+padding.left+','+padding.top+')');
        
rectGrp.selectAll("rect").data(Data_CARD).enter()
    .append("rect")

    .attr("width",xScale.bandwidth())

    .attr("height", function(d){
        return chartArea.height-yScale(d.Amount);
    })

    .attr("x", function(d) {
        return xScale(d.Case);
    })

    .attr("y", function(d) {
        return yScale(d.Amount);
    })

    .attr("fill", function(d,i) {
        return color[i];
    });

条的颜色相同：黑色。

【问题讨论】：

标签： javascript d3.js bar-chart

【解决方案1】：

既然你在做

var color = d3.scaleOrdinal([`#383867`, `#584c77`, `#33431e`, `#a36629`, `#92462f`, `#b63e36`, `#b74a70`, `#946943`]);

color 是一个缩放函数。

因此，在您的 fill attr 中，您可以执行以下操作：

.attr("fill", function(d,i) {
    return color(i);
})

另外，您看到黑色是因为您将fill 设置为无效属性，可能是undefined。

我无法测试它，但我认为它应该这样做。

【讨论】：