在D3.js V4中为Top10实体条形图的每个条形设置唯一颜色

你可以直接利用d3.schemeCategory10数组的索引来给每个条形分配唯一颜色，这个方案刚好适配你的Top10需求——毕竟schemeCategory10本身就包含10种不重复的颜色，和你的数据数量完美匹配。

具体修改方式 #

把你代码里的style("fill", func...)替换成基于数据索引的颜色取值函数就可以了：

bar_svg.selectAll("#bar_chart")
  .data(TOP_TEN_CHANNELS)
  .enter().append("rect")
  .attr("rx", 2) // 设置X角曲线半径
  .attr("ry", 2)
  .attr("class", "bar")
  .style("fill", (d, i) => d3.schemeCategory10[i])
  // 别忘了补充x、y、width、height等必要的矩形属性

原理说明 #

• d3.schemeCategory10是一个长度为10的颜色数组，每个索引对应一种唯一的分类颜色
• 回调函数里的i是当前数据项在TOP_TEN_CHANNELS数组中的索引（从0到9），刚好和schemeCategory10的索引一一对应，确保每个条形拿到独一无二的颜色
• 不管你的Top10实体数量是1到10之间的任何数，这个方法都能保证每个条形颜色不重复

注意事项 #

如果你使用的是D3 v5及以上版本，需要确保已经引入了d3-scale-chromatic模块（或者直接引入完整的D3库），因为schemeCategory10是这个模块提供的分类颜色方案。

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