如何在JavaScript中为32个元素的数组分配唯一颜色？

你不需要手动补充32种颜色，D3提供了多种预定义的序数配色方案，以及灵活的颜色生成方式，完全能满足需求：

方案1：使用多色预定义序数配色方案 #

D3内置了不少包含超过10种颜色的序数配色方案，直接组合或使用即可覆盖32个元素：

• 组合Category系列方案：d3.schemeCategory20（20种）+ d3.schemeCategory20b（20种），总共40种颜色，足够分配给32个元素：

const colors = d3.scaleOrdinal()
  .domain(sorted_artists)
  .range([...d3.schemeCategory20, ...d3.schemeCategory20b]);

• Tableau扩展方案：d3.schemeTableau20提供20种Tableau风格颜色，搭配d3.schemeTableau10可凑够30种，再补充2种自定义颜色就能满足需求：

const colors = d3.scaleOrdinal()
  .domain(sorted_artists)
  .range([...d3.schemeTableau10, ...d3.schemeTableau20, "teal", "indigo"]);

方案2：用连续颜色比例尺生成任意数量的唯一颜色 #

如果预定义方案的颜色风格不符合需求，可以用连续颜色比例尺生成32种区分度高的离散颜色，比如使用interpolateViridis（经典的科学可视化配色）：

// 先创建连续颜色比例尺，覆盖0到31的范围
const sequentialScale = d3.scaleSequential(d3.interpolateViridis)
  .domain([0, sorted_artists.length - 1]);

// 将生成的颜色作为序数比例尺的范围
const colors = d3.scaleOrdinal()
  .domain(sorted_artists)
  .range(sorted_artists.map((_, index) => sequentialScale(index)));

这种方法可以生成任意数量的唯一颜色，颜色过渡自然，且能保证不同元素的颜色区分度。

方案3：手动补充颜色（可选） #

如果确实需要完全自定义的颜色集合，那你需要手动补充颜色到32种，但前两种方案更高效且能保证配色的合理性，不需要手动维护大量颜色值。

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