D3.js scaleLinear函数返回值异常：结果为范围最大值乘索引

问题现象 #

你的代码返回结果是「范围最大值 × 索引」（比如索引0返回400、索引1返回800），与预期的线性映射结果不符。

代码片段 #

const xLineScale = scaleLinear()
    .domain(pointData.map((data, index) => index))
    .range([0, dimension.width])

console.log(pointData.map((data, index) => index))                //chart.js:33
console.log(xLineScale.range())                                   //chart.js:34

pointData.map((v, i) => {
    console.log(xLineScale(i))                            //chart.js:37
})

控制台输出截图 #

问题根源 #

你给scaleLinear().domain()传入了完整的索引数组（比如[0,1,2,3]），但D3的scaleLinear对domain的处理逻辑是：

• 如果传入长度>2的数组，会生成分段线性比例尺，要求domain和range的长度必须一致；
• 若range长度不足，D3会自动重复range值来匹配，最终导致映射逻辑完全偏离预期。

而你的需求是将索引0 ~ (pointData.length-1)线性映射到0 ~ dimension.width，只需要给domain传入最小索引和最大索引组成的二元数组即可。

修复代码 #

const xLineScale = scaleLinear()
    .domain([0, pointData.length - 1]) // 仅传入定义域的最小、最大值
    .range([0, dimension.width])

验证逻辑 #

修复后：

• 索引0会映射到0
• 索引pointData.length-1会映射到dimension.width
• 中间索引会按线性比例计算对应值，完全符合预期。

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