javascript - 使用 d3.csv 读取键值对

Question

希望制作 map 可视化。想要一个这种格式的简单键值对象:

 {
      Alabama: "AL",
      Alaska: "AK",
      Arizona: "AZ",
      ...
 }

这样读取数据:

    var source = "https://raw.githubusercontent.com/plotly/datasets/master/2011_us_ag_exports.csv";
    
    var stateCodes = {};
    
    d3.csv(source, data => {
        data.map(d => {
            stateCodes[d["state"]] = d["code"];
            return stateCodes;   
        }); 
    });

    console.log(stateCodes);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>

尝试运行这个片段。它似乎在抓取正确的数据点，但没有填充 stateCodes 对象或没有返回它。

我应该改变什么？

Answer 1

您将 console.log 放在异步的 d3.csv 方法之后。将它移到 d3.map 之后并检查是否填充了 stateCodes:

Docs for d3.csv method .

var source = "https://raw.githubusercontent.com/plotly/datasets/master/2011_us_ag_exports.csv";
    
var stateCodes = {};
    
d3.csv(source, (data) => {
    data.map(d => {
        stateCodes[d["state"]] = d["code"];
        return stateCodes;   
    });
 
    console.log(stateCodes);
    // other code
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>

请注意，在您的数据文件中，California 开头有一个空格字符。

您可以在源文件中修复它或使用 trim 方法:

stateCodes[d["state"].trim()] = d["code"];;