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

Question

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

数据在 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 菜鸟，我不明白为什么这个 vanilla JS 函数会返回不同的结果，对此该怎么办？任何帮助将不胜感激。

Answer 1

造成这种差异的原因是 D3 v4.x 在解析 CSV 时为 data 数组创建了一个名为 columns 的附加属性(查看 the documentation ) .

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

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

D3 在“正常”对象之后创建这个附加对象(从技术上讲，数组的附加属性):

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

您可以使用 data.columns 调用它。

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

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

delete incData.columns;

要检查此 columns 属性，只需 console.log(data) 使用 D3 v3 和 v4，比较结果。