D3 v4中schemeBlues[9]报错的原因及解决方法

报错原因 #

• D3 v4重构了模块结构，v3里直接可用的d3.schemeBlues这类配色方案，在v4中被拆分到了独立的d3-scale-chromatic模块里，默认的d3.v4.js核心库不包含这个模块，所以直接访问d3.schemeBlues会返回undefined，进而触发读取[9]属性的报错。
• 而d3.geoAlbersUsa()属于v4核心库自带的d3-geo模块，所以能正常运行，这就导致了同一脚本里两个API表现不一致的情况。

修复方法 #

方法1：引入d3-scale-chromatic模块 #

在现有v4核心库的script标签之后，添加引入该模块的代码：

<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

引入后，你原来的代码无需修改，var blues = d3.scaleOrdinal(d3.schemeBlues[9]);就能正常运行。

方法2：使用v4内置的连续渐变方案（可选） #

如果你的场景适合连续颜色渐变，也可以直接用v4核心库支持的插值函数，不需要额外引入模块：

// 生成连续的蓝色渐变
var blues = d3.scaleSequential(d3.interpolateBlues);

内容的提问来源于stack exchange，提问作者Amarth Gûl