如何简便生成N种颜色？咨询非D3常规实现方案

嘿，我懂你想跳出D3常规用法来生成彩虹色系N种颜色的需求！其实不用纠结D3自带的那些scale方法，咱们有两种简单的思路可以实现，完全贴合你的要求：

方法一：纯原生JS手动生成彩虹色 #

彩虹色的核心是色相（Hue）在0-360度之间均匀分布，我们可以直接基于HSL颜色模型来实现，不需要依赖任何D3的工具方法：

const categories = ['a', 'b', 'c', 'd', 'e']; // 你的分类数组
const n = categories.length;

const palette = categories.reduce((acc, category, index) => {
  // 把0-360度的色相范围平均分给每个分类
  const hue = (index / n) * 360;
  // 固定饱和度（80%）和亮度（50%），可根据需求调整
  const color = `hsl(${hue}, 80%, 50%)`;
  acc[category] = color;
  return acc;
}, {});

console.log(palette);

这种方式完全脱离D3的约束，你可以自由调整饱和度和亮度参数：比如把饱和度降到60%会得到更柔和的色调，把亮度提到60%颜色会更明亮。

方法二：用D3插值函数但跳过scale体系 #

如果你还是想用到D3的彩虹色插值逻辑，但不想用它的scale方式，也可以直接调用d3.interpolateRainbow函数，写法更简洁：

const categories = ['a', 'b', 'c', 'd', 'e'];
const n = categories.length;

const palette = categories.reduce((acc, category, index) => {
  // t值从0到1均匀分布，注意这里用index/(n-1)让最后一个元素对应t=1
  const t = index / (n - 1);
  acc[category] = d3.interpolateRainbow(t);
  return acc;
}, {});

这个方法得到的颜色和D3原生的rainbow scale完全一致，但没有用到D3的scale构建流程，也算符合你“非D3常规方式”的要求。

备注：内容来源于stack exchange，提问作者SkyWalker