D3地図データラベルが正しく表示されない

Question

地図上にマウスカーソルを置くと、状態名とデータオブジェクトで指定された状態に関連付けられたデータが表示されます。

Codepen：http://codepen.io/jacob_johnson/pen/ORqwEL?editors=1010

私の問題は、適切な状態名]テキストの後に表示するためのデータを取得している - 私は単に未定義の変数を取得しています。データには何も表示されません。この方法がうまくいくと思ったので、データを正しく取得する方法がわかりません。データを呼び出す方法は次のとおりです。

... AT LINE 353 of CODEPEN LINK 
.on("mousemove", function(d) { 
     var html = ""; 

     html += "<div class=\"tooltip_kv\">"; 
     html += "<span class=\"tooltip_key\">"; 
     html += id_name_map[d.id]; 
     html += "</span>"; 
     html += "<span class=\"tooltip_value\">"; 
     html += valueById.get(d.id); 
     html += ""; 
     html += "</span>"; 
     html += "</div>"; 

     $("#tooltip-container").html(html); 
     $(this).attr("fill-opacity", "0.8"); 
     $("#tooltip-container").show(); ... 

なぜ定義されていないのかわかりません。どんな助けでも大歓迎です。

ありがとうございました。

Answer 1

データのプロパティに正しくアクセスしていません。

data.forEach(function(d) { 
    // d doesn't have the properties MAP_STATE and MAP_VALUE 
    var id = name_id_map[d[MAP_STATE]]; // change to d[0][0] 
    valueById.set(id, +d[MAP_VALUE]); // change to d[1][1] 
}); 

また、quantizeメソッドも変更されます。それはあなたの問題を解決するはずです