为什么这个vanilla js函数在d3v3和d3v4中返回不同的结果 [英] Why does this vanilla js function return different results in d3v3 and d3v4

问题描述

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

This is a MWE based on some templates going from v3 to v4 of the amazing d3.js.

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

The data is in csv file, both examples load the same file (its clean):

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问题： p>

here is MWE in question:

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 个值，例如：

Now in v3 the stackData array has 6 objects with 10 values each e.g.:

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

}

6个对象，每个对象的 11 个值，最后一个令人讨厌的是：

In v4 for however I get an array with 6 objects with 11 values each, the last one annoyingly being:

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

}      

作为一个js noob，我不明白为什么这个vanilla JS函数返回不同的结果，以及做什么呢？任何帮助将不胜感激。

As a js noob, I don't understand why this vanilla JS function returns different results, and what to do about it? Any help would be greatly appreciated.

推荐答案

这个区别的原因是D3 v4.x创建了一个名为 columns 到数据数组，当它解析CSV（看文档）。

The reason for this difference is that D3 v4.x creates an additional property named columns to the data array when it parses the CSV (look at the documentation).

例如，给定您的数据： / p>

So, for instance, given your data:

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

D3在正常对象之后创建这个附加对象（技术上来说，是数组的另一个属性）：

D3 creates, after the "normal" objects, this additional object (technically speaking, an additional property to the array):

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

您可以使用 data.columns 来呼叫。

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

The problem you're facing right now is that when you use a for...in loop you end up iterating this property as well, getting a lot of NaN.

解决方案：你可以简单地避免迭代列 t需要它，你可以从你的数据中删除它。有几种从JavaScript中的数组中删除属性的方法，更简单的方法是：

Solution: you can simply avoid iterating over columns or, if you don't need it, you can remove it from your data. There are several ways for removing an property from an array in JavaScript, the simpler way being this:

delete incData.columns;

要检查此列属性， code> console.log（data）使用D3 v3和v4，比较结果。

To check this columns property, simply console.log(data) using D3 v3 and v4, comparing the results.

这篇关于为什么这个vanilla js函数在d3v3和d3v4中返回不同的结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！