如何在React+D3开发中为柱状图的每个柱子设置独立颜色

错误原因 #

你将fill属性配置在了未绑定数据集的<g>容器元素上，<g>元素本身没有对应每个柱子的数据，回调中的索引i固定为0，所有子元素<rect>会继承同一个填充色，因此所有柱子颜色统一。

修改方案 #

将填充色配置从<g>元素转移到已绑定数据的<rect>元素上，即可通过每个柱子对应的索引取颜色数组中的独立值。

修改前的错误代码段： #

svg.append('g')
    .attr('fill', function (d, i, j) {
        console.log(d, j, i);
        return colors[i];
    })
    .selectAll('rect')
    .data(data)
    .join('rect')
    .attr('x', (d, i) => x(i))
    .attr('y', (d) => y(d.quantity))
    .attr('height', (d) => y(0) - y(d.quantity))
    .attr('width', x.bandwidth());

修改后的正确代码段： #

svg.append('g')
    .selectAll('rect')
    .data(data)
    .join('rect')
    .attr('x', (d, i) => x(i))
    .attr('y', (d) => y(d.quantity))
    .attr('height', (d) => y(0) - y(d.quantity))
    .attr('width', x.bandwidth())
    // 为每个独立的rect元素设置填充色，i为当前柱子的索引
    .attr('fill', (d, i) => colors[i])

可选优化（推荐） #

如果需要固定分类对应的颜色（不受数据排序变化影响），可以使用d3序数比例尺映射分类和颜色：

// 在colors定义后添加比例尺
const colorScale = d3.scaleOrdinal()
  .domain(data.map(item => item.category))
  .range(colors);

// 填充色改为按分类取值
.attr('fill', d => colorScale(d.category))

内容的提问来源于stack exchange，提问作者klaurtar1