0

コロプレス マップの d3 ツールチップを設定しようとしています。ツールチップが機能しており、マップの色を割り当てるために使用している lotteryMapNum.json からデータを取得できますが、表示するテキストを取得できません。何をしても「未定義」または NaN になります。別の方法でデータを呼び出す必要があると考えていますが、方法がわかりません。

var newDict = {};


d3.json("data/myData/lotteryMapNum.json", function(data) {
data.forEach(function(d) { newDict[d.id] = +d.hopeDollars;})
data.forEach(function(d) { newDict[d.COUNTY] = +d.COUNTY;});

});

d3.json("data/myData/simpleGA.json", function(json) {
  counties.selectAll("path")
  .data(json.features)
  .enter().append("svg:path")
  .attr("class", function(d) { return quantize(newDict[d.id]);})
  .attr("d", path)
  .call(d3.helper.tooltip()
            //.attr({class: function(d, i) { return d + ' ' +  i + ' A'; }})
            .text(function(d){ return 'value: '+newDict[d.id]+newDict[d.COUNTY]; })
        )
        .on('mouseover', function(d){ d3.select(this).style({fill: 'green', stroke: 'red'}); })
        .on('mouseout', function(d){ d3.select(this).style({fill: '', stroke: ''}); });

});

宝くじMapNum.json

[
{"COUNTY":"APPLING",
"hopeDollars":12921240,
"id":"0"}
]

simpleGA.json

{
"type": "FeatureCollection",

"features": [
{ "type": "Feature", "id": 0, "properties": { "NAMELSAD10": "Appling County"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ -83.04292, 30.947296 ], [ -83.05332, 30.94753 ],] ] } }
]
}
4

2 に答える 2

1

ざっと見てみると、2つの潜在的な問題があることがわかります...

1) json.features にプロパティ 'd.COUNTY' がないように見えます... text() 関数の 'd' は、simpleGA.json から直接取得される dom 要素のデータを参照しています ( 「id」は存在しますが、「COUNTY」は存在しません。)

代わりに、おそらく参照したいでしょう：

d.properties['NAMELSAD10']

2) 2 つの要求が並行してロードされていますが、一方の応答が他方に依存しています。lotteryMapNum.json リクエストが完了する前に、simpleGA.json の完了コードが実行されている可能性があります...その場合、「newDict」の要素がまだ定義されていない可能性があります。

これに対する可能な解決策は、依存関係に基づいて 2 つの要求を連鎖させることです。

var newDict = {};


d3.json("data/myData/lotteryMapNum.json", function(data) {
    data.forEach(function(d) { newDict[d.id] = +d.hopeDollars;})
    data.forEach(function(d) { newDict[d.COUNTY] = +d.COUNTY;});

    d3.json("data/myData/simpleGA.json", function(json) {
        counties.selectAll("path")
        .data(json.features)
        .enter().append("svg:path")
        .attr("class", function(d) { return quantize(newDict[d.id]);})
        .attr("d", path)
        .call(d3.helper.tooltip()
            //.attr({class: function(d, i) { return d + ' ' +  i + ' A'; }})
            .text(function(d){ return 'value: '+newDict[d.id]+newDict[d.COUNTY]; })
        )
        .on('mouseover', function(d){ d3.select(this).style({fill: 'green', stroke: 'red'}); })
        .on('mouseout', function(d){ d3.select(this).style({fill: '', stroke: ''}); });

    });

});

さらにサポートが必要な場合は、2 つの .json ファイルへのリンクを投稿してください。jsfiddle でより適切にトラブルシューティングできます。

編集: jsfiddle は、大きなファイルサイズで多くの問題を引き起こしています...しかし、これは基本的にデータベースのような結合で意味するものです...また、geojson マップの代わりにリストを操作していました:

// load json1
d3.json("lotterMapNum.json", function(lotterMapNum) {

    // load json2
    d3.json("simpleGA.json", function(simpleGA) {


        for (var i = 0; i < simpleGA.features.length; i++) {

            newDict[simpleGA.features[i].id] = simpleGA.features[i];
        }

        for (var j = 0; j < lotteryMapNum.length; j++) {

            if (typeof newDict[lotteryMapNum[j].id] === 'undefined') {
                newDict[lotteryMapNum[j].id] = {};
            }
            newDict[lotteryMapNum[j].id].hopeDollars = lotteryMapNum[j].hopeDollars;
            newDict[lotteryMapNum[j].id].COUNTY = lotteryMapNum[j].COUNTY;

        }

        var counties = d3.select('#counties')
        .data(newDict)
        .enter()
        .append('li')
        .text(function(d){return d.id + ': ' + d.COUNTY + ', $' + d.hopeDollars;});

    }); 
});
于 2013-07-30T02:34:59.537 に答える
1

かなり簡単な修正だと思います。d.COUNTY の前にある + を取り除き、各 ID キーの値を配列にしてみてください。

d3.json("data/myData/lotteryMapNum.json", function(data) {
    data.forEach(function(d) { newDict[d.id] = [+d.hopeDollars, d.COUNTY];});

次に、同じ方法で欲望のツールチップ テキストにアクセスします。

.text(function(d){ return 'value: '+ newDict[d.id][0] + newDict[d.id][1]; })
于 2013-07-30T14:09:42.190 に答える