如何通过classed方法为堆叠条形图图层添加对应键名的类？

没问题，我来帮你搞定这个类名添加的问题～

你之前的思路是对的，但代码里有两个小细节需要调整：

• 回调函数里的return语句多了个多余的逗号，这会导致语法错误
• D3的选择器回调函数参数通常是(d, i)（当前数据项和索引），虽然只写i也能拿到索引，但带上d更符合D3的规范，也能避免潜在的作用域问题

正确的写法有两种方式： #

方式一：分开添加类

在你现有的.classed('layer', true)后面，再追加一行来添加对应键名的类：

.classed('layer', true)
.classed((d, i) => keys[i], true)

这样每个图层<g>元素就会同时拥有layer类和keys数组里对应的那个类名啦。

方式二：用对象一次性添加多个类

利用ES6的计算属性名，把两个类一次性添加上，写法更简洁：

.classed((d, i) => ({
  'layer': true,
  [keys[i]]: true
}))

这种写法的效果和方式一完全一致。

小提醒 #

要确保你的keys数组长度和堆叠后的数据stackedData的长度是一致的，这样每个图层才能准确对应到keys里的键名哦。

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