0

我试图让我的酒吧在 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];
    });

条具有相同的颜色：黑色。

4

1 回答 1

1

既然你在做

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

color是一个尺度函数。

因此，在您的fillattr 中，您会执行以下操作：

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

此外，您看到黑色是因为您设置fill了无效属性，可能是undefined.

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

于 2020-07-20T17:46:38.350 回答