javascript - d3.max() 不返回数组中的最大值？

Question

我整夜都在自学 d3，似乎无法弄清楚我遇到的这个问题。我正在动态喂养 d3.max()通过 HTML parseInt() 处理一组数字(我尝试用 parseFloat()/<select> 解析它们，但不解析它们)元素。当我的可视化变得不正确时，我正在使用控制台检查这些值。但是，有时它会返回最大值，有时则不会。

var localityElectricityConsumption = localities[localityName].totalElectricityConsumption;
            maxConsumption = d3.max(localityElectricityConsumption);
            r = d3.scale.linear().domain([0, maxConsumption]).range([120, 0]);

            console.log("array being fed to d3.max: " + localityElectricityConsumption);
            console.log("what d3.max() is returning: " + d3.max(localityElectricityConsumption));
            console.log("what parseInt(d3.max()) is returning: " + d3.max(localityElectricityConsumption));

您可以看到实时可视化并检查控制台 here .尝试使用最上面的图表从北美地区切换到墨西哥地区。 d3.max()返回北美的最大值，但不返回墨西哥的最大值，因此无法正确绘制墨西哥的数据。我正式被难住了。任何帮助将不胜感激。

编辑:

这是用于创建 localities[localityName].totalElectricityConsumption 的代码:

 d3.csv("data/" + dataset, function (data) {

            for (var i = 0; i < data.length; i++) {

                var record = data[i];

                if (dataset === "total_electricity_consumption.csv") {
                    currentDataset = listOfDatasets[0].name;
                    record.totalElectricityConsumption = [];

                    // loop through all years, from 1980 to 2012
                    for (var year = 1980; year <= 2012; year++) {
                        var value = record[year];

                        // deal with missing data points
                        if (value === '--') {
                            value = 0;
                        }
                        else if (value === 'NA') {
                            value = 0;
                        }
                        else if (value === '(s)') {
                            value = 0;
                        }
                        else if (value === 'W') {
                            value = 0;
                        }

                        // add record of current total electricity consumption
                        record.totalElectricityConsumption.push(value);
                    }
                }

// create a list of country names
                localities[record.Locality] = record;
                listOfLocalities.push(record.Locality);
                }
}

抱歉，格式并不完美，因为我不得不删除一些内容以使代码在 Stack Overflow 中更具可读性。

Answer 1

正如预期的那样，d3.max() 确实返回了最大值...但是，它返回的是字符串 中的最大值，而不是数字中的最大值。

解释是，默认情况下，d3.csv() 会将所有值加载为字符串，即使它们是数字。因此，当您这样做时:

var value = record[year];

value 是字符串，不是数字。在 JavaScript 中，字符串数组的最大值不同于数字数组的最大值。例如，使用数字:

var myArray = [1, 65, 9, 32, 42];
console.log(d3.max(myArray));

<script src="https://d3js.org/d3.v4.min.js"></script>

这是预期值。但是看看如果我们使用字符串会发生什么:

var myArray = ["1", "65", "9", "32", "42"];
console.log(d3.max(myArray));

<script src="https://d3js.org/d3.v4.min.js"></script>

解决方案:将您的值更改为数字:

var value = +record[year];