d3.csvを使用してキー値のペアを読み取る

Question

地図を視覚化するために探します。このスニペットを実行してみ

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>

：など

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

読むデータ：この形式では、単純なキーと値のオブジェクトを募集。適切なデータポイントを取得しているが、stateCodesオブジェクトにデータを設定していないか、それを戻していないようです。

変更する必要はありますか？

Answer 1

d3.csvの後にconsole.logメソッドを置くと非同期です。 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"];を。