如何为Stacked bar chart的分段设置对应统一颜色？

嘿，我来帮你搞定这个颜色的问题～

你现在的代码.style('fill', (d, i) => { return colors[i]; });是按整个条形的索引来分配颜色的，所以每个完整的条形会被设成同一种颜色，这就没法区分堆叠的分段啦。

要让同一个key的分段都用统一颜色，关键是要根据每个分段的key属性来映射颜色，而不是条形的索引。D3的堆叠布局会给每个分段数据自动加上key字段，这个字段就是你当初定义堆叠类别时的那个key值。

具体改法分两步：

1. 先准备好和堆叠key对应的颜色映射 #

你可以用D3的序数比例尺来做，这样更规范：

// 假设你的堆叠类别key是['value1', 'value2']（根据你实际的key调整）
const keys = ['value1', 'value2'];
const colorScale = d3.scaleOrdinal()
  .domain(keys)
  .range(['#2ecc71', '#3498db']); // 这里放你想要的两种颜色

或者如果你习惯用数组直接对应，也可以这样：

const keys = ['value1', 'value2'];
const colors = ['#2ecc71', '#3498db'];

2. 修改fill的回调函数 #

把原来按索引取颜色的逻辑，改成按分段的key来取：

• 如果用比例尺的话：

.style('fill', d => colorScale(d.key))

• 如果用数组对应：

.style('fill', d => colors[keys.indexOf(d.key)])

这样一来，不管哪个条形里的value1分段，都会用同一种颜色，value2分段也会统一用另一种颜色，完美实现你要的效果～

另外要确认一下，你在创建堆叠布局的时候，确实用了.keys(keys)来指定堆叠的类别，比如：

const stack = d3.stack().keys(keys);
const stackedData = stack(yourOriginalData);

只有这样，每个分段数据才会带有正确的key属性哦。

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