本文详解如何在 D3.js v3 环境下正确配置太阳图（Sunburst）的颜色标尺，解决 d3.scaleOrdinal is not a function 报错及全黑着色问题，提供可直接运行的兼容方案。
本文详解如何在 d3.js v3 环境下正确配置太阳图（sunburst）的颜色标尺，解决 `d3.scaleordinal is not a function` 报错及全黑着色问题，提供可直接运行的兼容方案。
在使用 D3.js v3（如 d3.v3.min.js）构建太阳图时，原示例中基于 D3 v4+ 的写法——如 d3.scaleOrdinal(d3.schemePaired)——必然报错，因为：
- ✅
d3.scaleOrdinal是 D3 v4 引入的新型序数标尺，v3 中不存在； - ❌
d3.schemePaired是 D3 v4+ 新增的 12 色预设调色板，v3 中完全不可用； - ⚠️
d3.scale.ordinal().range(...)若未显式调用.domain()，D3 v3 会默认返回undefined，导致颜色计算失败（最终渲染为黑色）。
✅ 正确解决方案：使用 D3 v3 原生序数标尺 + 手动定义色值
推荐采用 d3.scale.category10() 或 d3.scale.category20()（v3 内置且稳定），并显式绑定 domain 以确保颜色映射准确：
<head>
<!-- 仅加载 D3 v3（移除冲突的 D3 v5+ CDN） -->
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://unpkg.com/sunburst-chart@1.8.0"></script>
<style>body { margin: 0; }</style>
</head>
<body>
<div id="chart"></div>
<script>
// ✅ D3 v3 兼容的颜色标尺：category10 支持最多 10 类别，category20 支持 20 类
const colorScale = d3.scale.category10();
// ? 关键：必须显式设置 domain！否则 scale 返回 undefined → 黑色
// 这里假设父节点名称是有限、可枚举的类别（如 'flare', 'analytics', 'graph'...）
// 实际项目中建议从数据中动态提取唯一父名
const parentNames = ['flare', 'analytics', 'graph', 'geometry', 'layout', 'util'];
colorScale.domain(parentNames);
fetch('flare.json').then(res => res.json()).then(data => {
Sunburst()
.data(data)
.label('name')
.size('size')
.color((d, parent) => {
// 安全兜底：若 parent 不存在或 name 未定义，返回默认色
const parentName = parent && parent.data && parent.data.name ? parent.data.name : 'unknown';
return colorScale(parentName);
})
.tooltipContent((d, node) => `Size: <i>${node.value}</i>`)
(document.getElementById('chart'));
});
</script>
</body>⚠️ 注意事项与进阶建议
-
Domain 必须显式设置：D3 v3 的
scale.category*()不支持自动推断 domain，漏掉.domain([...])是颜色全黑的最常见原因； -
色板容量限制：
category10最多区分 10 类，若父节点超过 10 个，建议改用category20或自定义更长色数组：const customColors = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf', '#aec7e8', '#ffbb78', '#98df8a', '#ff9896', '#c5b0d5']; const colorScale = d3.scale.ordinal().range(customColors); colorScale.domain(parentNames); // 同样不可省略 -
版本隔离提示：若项目中其他模块强依赖 D3 v3，切勿混入
d3@latest或d3@5+，否则将引发 API 冲突； -
现代替代建议：长期维护项目应考虑升级至 D3 v7+ 并使用 ES 模块化导入，但需同步更新
sunburst-chart至支持新版 D3 的分支（如sunburst-chart@2.x）。
通过以上配置，即可在 D3 v3 环境中稳定渲染彩色太阳图，彻底规避 scaleOrdinal is not a function 错误与着色异常问题。
