如何修改D3 Choropleth Map代码以适配自定义数值分桶？

我明白你卡在把Bostock的示例适配自己的数值范围和分桶上了，别担心，咱们一步步来修改代码：

首先，核心问题是原代码的color比例尺是基于等级（1-10）而非实际数值，而你的分桶是具体的数值区间，所以需要重新配置阈值比例尺的domain和range，同时调整图例用的x比例尺。

1. 定义你的分桶数组 #

先把你需要的10个分桶值存成一个变量，方便后续复用：

// 你的自定义分桶
var buckets = [2000, 3000, 4000, 5000, 10000, 15000, 20000, 30000, 50000, 100000];

2. 修改color阈值比例尺 #

D3的scaleThreshold中，domain是区间分界阈值，数量要比range的颜色数少1。你的10个分桶对应10个区间，所以需要9个阈值——也就是分桶数组中除第一个值外的所有元素（因为第一个区间是2000 ≤ x < 3000，最后一个是x ≥ 100000）。同时，颜色数量要改成10种，对应d3.schemeBlues[10]：

var color = d3.scaleThreshold()
    .domain(buckets.slice(1)) // 取[3000, 4000, ..., 100000]作为阈值
    .range(d3.schemeBlues[10]); // 10种蓝色渐变，匹配10个区间

3. 调整图例用的x比例尺 #

原x比例尺是给1-10的等级定位，现在你有10个分桶，需要让它覆盖你的分桶索引范围，这样图例的颜色块和标签才能正确对齐：

var x = d3.scaleLinear()
    .domain([0, buckets.length]) // 对应0到9的分桶索引（共10个分桶）
    .rangeRound([600, 860]); // 保持原图例的横向位置范围，你可以根据需要调整

4. 适配图例标签（可选但关键） #

最后，你需要把图例的文字从原等级改成你的分桶区间。可以用分桶数组生成对应的标签文本：

// 生成区间标签：比如"2000–3000"、"100000+"
var legendLabels = buckets.map(function(d, index) {
    if (index === buckets.length - 1) {
        return d + "+"; // 最后一个区间是"100000及以上"
    }
    return d + "–" + buckets[index + 1];
});

之后在绘制图例文本的时候，用这个legendLabels数组替换原有的等级文本即可。

这样修改后，当你导入自己的数据时，D3会根据数值所在的区间自动匹配对应的颜色，图例也会正确显示你的分桶范围。

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