D3.js threshold.range()函数介绍

在 D3.js 中，threshold.range() 函数用于返回离散化的阈值范围。它将一系列连续的值映射到一组离散的值并返回它们的集合。

语法

threshold.range([values])

参数

• values：指定离散的值数组。

返回值

该函数返回一组离散的值集合。

示例

假设我们有一组温度数据，如下：

const temperatures = [18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42];

我们可以使用 threshold.range() 函数将这些连续的温度值离散化，并返回离散的温度范围：

const thresholdScale = d3.scaleThreshold()
  .domain([20, 25, 30, 35, 40])
  .range(['cold', 'cool', 'moderate', 'warm', 'hot']);

console.log(thresholdScale(24)); // 'cool'
console.log(thresholdScale(30)); // 'moderate'
console.log(thresholdScale(36)); // 'warm'

在上面的示例中，我们使用了 scaleThreshold() 创建了一个阈值比例尺，并通过 domain() 指定了连续的温度范围，通过 range() 指定了对应的离散值范围。然后我们使用 scale() 函数将连续的温度值转换为离散的值。

总结

D3.js 中的 threshold.range() 函数用于将一组连续值映射到一组离散的值，并返回离散的值范围。它非常适用于对数值进行离散化处理的场景，例如地图上对人口数、GDP 等的离散化处理。