📌  相关文章
📜  D3.js | d3.extent()函数(1)

📅  最后修改于: 2023-12-03 15:14:34.698000             🧑  作者: Mango

D3.js | d3.extent()函数

简介

d3.extent()函数是D3.js中的一个用于获取数组最大值和最小值的函数。该函数通常用于数据可视化中的比例尺(scale)的定义中，通过获取数据范围来确定映射的值域，从而实现更好的数据展示效果。

使用方法

d3.extent()函数的基本语法如下：

d3.extent(array[, accessor])

其中，第一个参数为需要计算的数组，第二个可选参数用于对数组进行预处理，以便获取正确的最大值和最小值。

实例

考虑以下示例数据：

var data = [5, 3, 8, 4, 1, 7, 9, 2];

使用d3.extent()函数可以很方便地获取最大值和最小值：

var [min, max] = d3.extent(data);
console.log(min);  // 1
console.log(max);  // 9

如果数组中的元素是一个对象，我们可以通过指定accessor来获取其中的一个属性的最大值和最小值：

var cities = [
  {name: 'Shanghai', population: 24256800},
  {name: 'Beijing', population: 21516000},
  {name: 'Karachi', population: 14910352},
  {name: 'Istanbul', population: 14160467},
  {name: 'Dhaka', population: 13181397}
];

var [minPop, maxPop] = d3.extent(cities, d => d.population);
console.log(minPop);  // 13181397
console.log(maxPop);  // 24256800
注意事项

  • d3.extent()函数在计算数组的最大值和最小值时，会将数组中的元素转换为数字类型，因此在数组中含有非数字类型的元素时可能会导致计算错误。

  • 当我们使用accessor时，需要确保accessor函数能够正确地返回该元素应当比较的值，否则可能会导致结果错误。

参考文献