为何D3.js的min函数未返回数组正确最小值？

嘿，这个问题我之前也碰到过！原因其实很简单——你的数组里存的都是字符串类型的数值，而不是真正的数值类型，D3的d3.min()函数处理字符串数组时，会按照**字典序（Unicode编码顺序）**来比较，而不是我们直觉里的数值大小。

举个例子，字符串"10.42"的第一个字符是"1"，它的Unicode编码比"5.31"里的"5"要小，所以在字典序里"10.42"会被认为比"5.31"“更小”，这就是为什么你得到了不符合预期的结果。

解决方法有两种，都很简单： #

方法一：先把整个数组转成数值类型

提前用map()把每个字符串转换成数字，再调用d3.min()：

var data = ["5.31", "5.31", "5.32", "6.08", "6.08", "6.08", "6.71", "6.71", "7.34", "7.35", "7.35", "7.96", "7.96", "7.96", "7.97", "9.43", "9.43", "9.44", "9.44", "9.44", "9.92", "9.92", "9.92", "9.92", "9.93", "9.93", "10.42", "10.42", "10.9", "10.9", "10.91", "10.91", "10.91", "11.98", "12.62", "12.62", "12.62", "14.08", "15.04", "16.02", "17.09", "17.09", "17.09", "18.06", "18.45", "19.42", "20", "21.45", "24.85", "26.3"];
var numericData = data.map(item => parseFloat(item));
console.log(d3.min(numericData)); // 正确输出5.31

方法二：在d3.min里直接用访问器函数转换

不用提前改数组，直接在d3.min()的第二个参数里传入一个函数，把每个字符串转为数值后再比较：

var data = ["5.31", "5.31", "5.32", "6.08", "6.08", "6.08", "6.71", "6.71", "7.34", "7.35", "7.35", "7.96", "7.96", "7.96", "7.97", "9.43", "9.43", "9.44", "9.44", "9.44", "9.92", "9.92", "9.92", "9.92", "9.93", "9.93", "10.42", "10.42", "10.9", "10.9", "10.91", "10.91", "10.91", "11.98", "12.62", "12.62", "12.62", "14.08", "15.04", "16.02", "17.09", "17.09", "17.09", "18.06", "18.45", "19.42", "20", "21.45", "24.85", "26.3"];
console.log(d3.min(data, item => parseFloat(item))); // 正确输出5.31

两种方法都能让D3按照数值大小来比较元素，从而得到你想要的最小值。

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