为什么这个普通的 js 函数在 d3v3 和 d3v4 中返回不同的结果

这是一个基于一些从令人惊叹的 d3.js v3 到 v4 的模板的 MWE。

数据位于 csv 文件中，两个示例都加载相同的文件（干净）：

day,movie1,movie2,movie3,movie4,movie5,movie6
1,20,8,3,0,0,0
2,18,5,1,13,0,0
3,14,3,1,10,0,0
4,7,3,0,5,27,15
5,4,3,0,2,20,14
6,3,1,0,0,10,13
7,2,0,0,0,8,12
8,0,0,0,0,6,11
9,0,0,0,0,3,9
10,0,0,0,0,1,8

这是有问题的 MWE：

d3.csv("../data/source/movies.csv", function (error, data) {
dataViz(data)});

function dataViz(incData) {
expData = incData;
stackData =[];    

for (x in incData[0]) {
    if (x != "day") {
        var newMovieObject = {
            name: x, values:[]
        };             
        for (y in incData) {
            newMovieObject
            .values
             .push({
                x: parseInt(incData[y][ "day"]), 
                y: parseInt(incData[y][x])
            })
        }
        stackData
        .push(newMovieObject);
    }}}

现在在 v3 中stackData数组有 6 个对象10每个值例如：

{name: "movie1" values:[
  {x: 1, y:20} //0
  ... 
  {x:10, y:0} //9
]
…

}

然而在 v4 中我得到了一个包含 6 个对象的数组11值每一个，最后一个令人烦恼的是：

{name: "movie1" values:[
  {x: 1, y:20} //0
  ... 
  {x:10, y:0} //9
  {x: NaN, y: NaN} //10 *ouch*
]
…

}      

作为一个 js 菜鸟，我不明白为什么这个普通的 JS 函数返回不同的结果，以及该怎么办？任何帮助将不胜感激。

造成这种差异的原因是 D3 v4.x 创建了一个名为columns to the data解析 CSV 时的数组（查看文档 https://github.com/d3/d3-dsv/blob/master/README.md#d3-dsv).

因此，例如，给定您的数据：

day,movie1,movie2,movie3,movie4,movie5,movie6
1,20,8,3,0,0,0
2,18,5,1,13,0,0
...

D3 在“正常”对象之后创建这个附加对象（从技术上讲，一个附加对象）property到数组）：

columns: ["day", "movie", "movie2", "movie3", "movie4", "movie5", "movie6"]

你可以使用它来调用data.columns.

您现在面临的问题是，当您使用for...in循环你最终也会迭代这个属性，得到很多 NaN。

解决方案：您可以简单地避免迭代columns或者，如果您不需要它，可以将其从数据中删除。在 JavaScript 中，有多种方法可以从数组中删除属性，更简单的方法是：

delete incData.columns;

要检查这个columns财产，简单来说console.log(data)使用 D3 v3 和 v4 比较结果。