d3 v4 地图意外变空答案

【问题标题】：d3 v4 map becomes empty unexpectedlyd3 v4 地图意外变空
【发布时间】：2020-06-07 01:05:32
【问题描述】：

我正在尝试从 csv 读取数据并形成一个映射，其中键 = 状态缩写，值 = 数据中该状态的频率。

我的代码正确地创建了一个地图并读入了数据，我可以正确地console.log(MAP)。

但是，当我尝试使用 .each 或 .entries() 遍历地图时，地图是空的。 map.size() 返回 0。

var statesData = d3.map();
d3.csv("temp-data.csv", function(error, data) {
    if (error) throw error;
    data.forEach(function(row) {
        if (statesData.has(row.state) == false) {
          statesData.set(row.state, 1);
        }
        else {
          statesData.set(row.state, statesData.get(row.state) + 1);
        }
    });
});
console.log(statesData);
console.log(statesData.size());
statesData.each(function(d) {
  console.log("value: " + d);
});

输出：

{}
"$AZ": 1

"$CA": 1

"$CO": 1

"$IA": 1

"$KS": 2

"$OK": 1

"$OR": 1

"$PA": 1

"$WA": 1

<prototype>: Object { constructor: Map(), has: has(), get: get()
, … }
0

还附上一张图片以供澄清。

temp-data.csv:

id,state,
3,WA
4,OR
5,KS
8,CA
9,CO
11,OK
13,AZ
15,KS
16,IA
17,PA

所以看起来好像地图中有数据，但是当我调用 .size() 时它返回 0（这解释了为什么 .each() 方法不显示任何输出。

老实说，我不明白为什么会发生这种情况。我尝试阅读文档https://devdocs.io/d3~4/d3-collection#map，但它不明白为什么我可以console.log(MAP) 很好但不能遍历它。

谢谢！

【问题讨论】：

标签： javascript csv dictionary d3.js

【解决方案1】：

知道了：

variable scope in d3 javascript

d3.csv 是一个异步请求，因此所有依赖于该函数提供的数据的代码都应在该范围内。

这解释了为什么statesData 在d3.csv 范围之外的大小为0。

以下内容：

var statesData = d3.map();
d3.csv("temp-data.csv", function(error, data) {
    if (error) throw error;
    data.forEach(function(row) {
        if (statesData.has(row.state) == false) {
          statesData.set(row.state, 1);
        }
        else {
          statesData.set(row.state, statesData.get(row.state) + 1);
        }
    });

    console.log(statesData.size())
});

正确输出9。

【讨论】：