如何用D3.js scaleLinear更简洁地过滤定义域外的值？

嘿，刚好D3本身就能帮你简化这个过滤操作，不用自己手动写遍历检查的逻辑哦！

方法一：结合比例尺domain与数组filter #

你可以直接通过比例尺的domain()方法获取预设的定义域范围，再配合数组原生的filter()方法完成过滤，代码非常简洁：

var arr = [0, 1, 15, 60, 700];
var scaleX = d3.scaleLinear()
  .domain([10, 100])
  .range([0, 200]);

// 提取定义域的最小值和最大值
const [domainMin, domainMax] = scaleX.domain();
// 过滤出定义域内的值
const filteredArr = arr.filter(val => val >= domainMin && val <= domainMax);

console.log(filteredArr); // 输出: [15, 60]

这里要提一句：你的示例里期望结果包含1，但它其实小于定义域最小值10，如果是笔误的话，上面的代码会准确过滤出**[10, 100]闭区间内**的值；如果确实需要包含小于10的数值，可以调整判断条件为val <= domainMax哦。

方法二：给比例尺添加自定义filter方法 #

如果你想实现像你期望的scaleX.filter(arr)这样的调用方式，可以给D3的线性比例尺添加一个自定义方法，方便复用：

// 给scaleLinear原型添加自定义filter方法
d3.scaleLinear.prototype.filter = function(arr) {
  const [min, max] = this.domain();
  return arr.filter(val => val >= min && val <= max);
};

// 现在就可以直接调用啦
var filteredArr = scaleX.filter(arr);
console.log(filteredArr); // 输出: [15, 60]

这种方式把过滤逻辑和比例尺绑定在一起，不用每次都手动提取定义域范围，代码更简洁也更符合你的使用预期。

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