使用D3 V3加载旭日图遇d3.scaleOrdinal报错，颜色设置失效求助

核心原因 #

D3 V3版本中没有d3.schemePaired这个内置配色方案，这是D3 V4及以上版本新增的特性。直接将d3.schemePaired传入V3的d3.scale.ordinal()会导致比例尺无法获取有效颜色范围，最终所有切片显示黑色。

可行解决方案 #

1. 手动引入schemePaired配色数组 #

直接复制d3.schemePaired的颜色值定义到代码中，传给序数比例尺：

// 手动定义schemePaired的颜色范围
const color = d3.scale.ordinal()
  .range(["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"]);

2. 确保颜色映射绑定正确数据 #

在给旭日图切片设置填充色时，要传入能区分不同节点的属性值（比如节点名称、类别ID），让比例尺能生成不同颜色：

// 假设节点数据对象有name属性，用它作为颜色映射的依据
path.style("fill", function(d) {
  return color(d.data.name);
});

3. 使用D3 V3内置序数配色 #

如果不需要严格匹配schemePaired，也可以直接用V3自带的配色方案：

// 使用category10（10种颜色）
const color = d3.scale.category10();
// 或者category20（20种颜色）
const color = d3.scale.category20();

验证修改 #

替换颜色相关代码后重新运行，旭日图切片应该会显示对应配色，不再是全黑色。

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