Question

我是JavaScript的新手，我正在尝试使用JS加载数据库，以根据数据库绘制一些散点图。我想加载两个数据库：一个包含我想要绘制的信息，但每个行都有一个标识符，第二个数据库有一些基于ID的分组或分类信息。我们的想法是使用第二个DB中的分类来对散点图中的点进行着色。每个ID在第一个DB中可以有多个行。以下是我加载数据库的方法：

d3.csv('../data/db1.csv', function(data) {
    data.forEach(function(d) {
        d.x = +d.x;
        d.y = +d.y;
        d.ID = d.ID;

        d3.csv('../data/db2.csv', function(p) {
            p.forEach(function(pp) {
                var group = pp.group;
                var id = pp.id;
                if(id === d.ID){
                    d.group = group;
                }
            });
        };

        console.log("d", d);
        console.log("d.group", d.group);
    });
});

现在问题在于两个'console.log'行，第一行返回：

d Object { x: 0.0, y: 0.0, ID: "000", group: 0, ...}

但第二行返回：

d.group undefined

我不明白为什么对象d具有group的正确值，但d.group实际上并未定义。是不是d.group应该指向group的{{1}}成员？

更新：

根据以下建议，我尝试了其他一些版本。第一：

以及：

d3.csv(...
    data.forEach(...
        ...
        d3.csv(...
            ...
            //do the post processing here
        });
     });

     data.forEach(function(d){
         console.log('d', d);
         console.log('d.something', d.something);
     });
});

在我遇到同样的问题时，带有d3.csv(... data.forEach(... ... d3.csv(... ... }); }); data.forEach(function(d){ //do the post processing here }); data.forEach(function(d){ console.log('d', d); console.log('d.something', d.something); }); });的行打印出来并且有console.log(d)，因为它应该来自后期处理。但d.something行显示为console.log(d.something)。

这不仅仅是undefined，我尝试在FireFox的inspect元素中调试它并添加了一些手表，同样的情况也在那里发生。

Answer 1

您遇到的问题是javascript的异步特性以及它提供的运行完成保证。

简而言之，因为加载CSV文件是一个异步操作，javascript将在运行处理CSV文件的回调函数之前完全运行父函数。因此，您只能在加载后访问组数据（只有在执行回调时才能保证）。因此，即使在加载视觉组后，，它们也会在加载组数据之前执行。

如果你在最里面的函数中移动console.log调用，它们都会工作。

您可以阅读有关此on MDN和here is another nice article
的更多信息

对象成员并在JS中访问它们

1 个答案: