0
d3を使用してマップをレンダリングしようとしていますが、django Webフレームワーク上で実行されるHTMLページを使用しています。これはD3の例アーカイブから直接マップの例です：http://bl.ocks.org/NPashaP/a74faf20b492ad377312d3.jsでのJavascriptオブジェクトの問題
私は州の低、高、平均ことに気づいた、と色は、すべての（私がコメントアウトこと）この機能を使用してランダムに生成されます。
// var sampleData ={}; /* Sample random data. */
// ["HI", "AK", "FL", "SC", "GA", "AL", "NC", "TN", "RI", "CT", "MA",
// "ME", "NH", "VT", "NY", "NJ", "PA", "DE", "MD", "WV", "KY", "OH",
// "MI", "WY", "MT", "ID", "WA", "DC", "TX", "CA", "AZ", "NV", "UT",
// "CO", "NM", "OR", "ND", "SD", "NE", "IA", "MS", "IN", "IL", "MN",
// "WI", "MO", "AR", "OK", "KS", "LS", "VA"]
// .forEach(function(d){
// var low=Math.round(100*Math.random()),
// mid=Math.round(100*Math.random()),
// high=Math.round(100*Math.random());
// sampleData[d]={low:d3.min([low,mid,high]),
// high:d3.max([low,mid,high]),
// avg:Math.round((low+mid+high)/3),
// color:d3.interpolate("#ffffcc", "#800026")(low/100)};
// });
sampleDataがbroswerログインコンソールである場合には拡張したとき、それは次のようになり、オブジェクトの辞書を出力します。私は自分のデータと変数sampleDataを交換すると
{"HI":{low:20, high:10, avg:15, color:'#ffffcc'}, "AK"....
：
var sampleData= {
"HI":{low:69, color:"#e6e6ff"},
"AK":{low:84, color:"#e6e6ff"},
"FL":{low:1099, color:"#0000ff"},
"SC":{low:223, color:"#b3b3ff"},
"GA":{low:614, color:"#8080ff"},
"AL":{low:228, color:"#b3b3ff"},
"NC":{low:686, color:"#8080ff"},
"TN":{low:416, color:"#b3b3ff"},
"RI":{low:119, color:"#ccccff"},
"CT":{low:319, color:"#b3b3ff"},
"MA":{low:1195, color:"#0000ff"},
"ME":{low:128, color:"#ccccff"},
"NH":{low:225, color:"#b3b3ff"},
"VT":{low:163, color:"#ccccff"},
"NY":{low:1779, color:"#0000b3"},
"NJ":{low:550, color:"#8080ff"},
"AZ":{low:537, color:"#8080ff"},
"AR":{low:222, color:"#b3b3ff"},
"CA":{low:3453, color:"#000066"},
"DE":{low:84, color:"#e6e6ff"},
"ID":{low:155, color:"#ccccff"},
"IL":{low:1082, color:"#0000ff"},
"IN":{low:452, color:"#b3b3ff"},
"IA":{low:219, color:"#b3b3ff"},
"KS":{low:197, color:"#ccccff"},
"KY":{low:274, color:"#b3b3ff"},
"LA":{low:274, color:"#b3b3ff"},
"MD":{low:662, color:"#8080ff"},
"MI":{low:894, color:"#8080ff"},
"MN":{low:670, color:"#8080ff"},
"MS":{low:82, color:"#e6e6ff"},
"MO":{low:509, color:"#8080ff"},
"MT":{low:72, color:"#e6e6ff"},
"NE":{low:165, color:"#ccccff"},
"NV":{low:206, color:"#b3b3ff"},
"NM":{low:213, color:"#b3b3ff"},
"ND":{low:46, color:"#e6e6ff"},
"OH":{low:941, color:"#8080ff"},
"OK":{low:215, color:"#b3b3ff"},
"OR":{low:1152, color:"#0000ff"},
"PA":{low:1171, color:"#0000ff"},
"SD":{low:43, color:"#e6e6ff"},
"TX":{low:1490, color:"#0000ff"},
"UT":{low:270, color:"#b3b3ff"},
"VA":{low:723, color:"#8080ff"},
"WA":{low:1667, color:"#0000b3"},
"WV":{low:83, color:"#e6e6ff"},
"WI":{low:541, color:"#8080ff"},
"WY":{low:44, color:"#e6e6ff"},
};`
私のマップの特定のセクションは、六角の色で塗りつぶされます。 
そして、私のブラウザのコンソールであるオリジナルsampleDataを使用している場合は発生しません、エラーが返されます、これに加えて
uStates.js:72 Uncaught TypeError: Cannot read property 'color' of undefined
at SVGPathElement.<anonymous> (uStates.js:72)
at SVGPathElement.u (d3.v3.min.js:1)
at d3.v3.min.js:3
at Y (d3.v3.min.js:1)
at Array.Co.each (d3.v3.min.js:3)
at Array.Co.style (d3.v3.min.js:3)
at Object.uStates.draw (uStates.js:72)
at (index):136
元sampleDataが使用されているときに表示される小さなツールチップがします私のカスタムsampleData変数が使用されていると表示されません。私はなぜそれが不思議です。ここではそのためのJavascriptコードです：
function tooltipHtml(n, d){ /* function to create html content string in
tooltip div. */
return "<h4>"+n+"</h4><table>"+
"<tr><td>number:</td><td>"+(d.low)+"</td></tr>"+
"</table>";
}
は、誰も私に伝えることができます：
- 私は私のコンソールでその特定のエラーを取得していますなぜ？
- なぜ唯一状態は、状態が省略された文字列の隣にあるオブジェクトに用意されているヘックスで塗りつぶされていますか？
sampleDataのツールチップが機能しないのはなぜですか？米国の州のあなたの2つのデータセット間の不一致があり