缺少d3连接choropleth地图中的数据的步骤 [英] Missing a step for d3 connecting data in choropleth map
问题描述
我尝试连接我的两个json文件以显示我的choropleth地图上的信息。我有地图渲染，但我被困在连接我的第二个json文件到地图文件。这两个文件包括所有项目的id，但id不是位于对象之前，它在里面，所以我不知道如何抓住它。
这里是我目前有的：
var data; //异步加载
var width = 600;
var height = 600;
var projection = d3.geo.albers（）
//.center([-84.36322,32.397649]）;
.translate（[ - 1000，-200]）
.scale（[6000]）;
var path = d3.geo.path（）
.projection（projection）;
var svg = d3.select（＃chart）
.append（svg：svg）;
var counties = svg.append（svg：g）
.attr（id，counties）
.attr（class，Blues ）;
d3.json（data / myData / simpleGA.json，function（json）{
counties.selectAll（path）
.data json.features）
.enter（）。append（svg：path）
.attr（class，data？quantize：null）
.attr ）;
}）;
d3.json（data / myData / lotteryMapNum.json，function（json）{
data = json;
counties.selectAll （path）
.attr（class，quantize）;
}）;
function quantize（d）{
returnq+ Math.min（8，~~（data [d.id] .hopeDollars * 9/12））+-9 ;
}
simpleGA.json
{
type：FeatureCollection，
features：[
{type：Feature id：0，properties：{NAMELSAD10：Lanier County}，geometry：{type：多边形，coordinates：[[-83.04292，30.947296]，[-83.05332 ，30.94753]，]]}}}
]
}
lotteryMapNum.json
[
{COUNTY：Lanier，
hopeDollars：12921240，
id：0}
]
工具提示的新代码： / p>
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 /myData/simpleGA.json，function（json）{
counties.selectAll（path）
.data（json.features）
.enter（）。append（svg：路径）
.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函数（d）{return'value：'+ newDict [d.id] + newDict [d.COUNTY];}）
）
。 select（this）.style（{fill：'green'，stroke：'red'}）;}）
.on（'mouseout'，function（d）{d3.select（this）.style fill：''，stroke：''}）;}）;
}）;
}）;
var quantize = d3.scale.quantize（）
//.domain([611850，627698760]）
.domain（[0，700000000]）
.range（d3 .range（9）.map（function（i）{returnq+ i +-9;}））;
};
使用ID为键的空字典未定量为值：
var newDict = {};
d3.json（data / myData / lotteryMapNum.json，function（data）{
data.forEach（function（d）{newDict [d.id] = + d。 hopeDollars;}）;
}）;
然后，在设置路径类时使用quantize函数：
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] ;}）
随时可以添加null条件以检查id是否存在。 p>
基本上，这将仅使用检查每个路径id（d.id）的字典值，返回量化值，并相应地设置类。
还有一个更复杂的quantize实现：
var quantize = d3.scale.quantize （）
.domain（[0，1]）$ b $ b .range（d3.range（9）.map（function（i）{returnq+ i +-9;} ）;
I'm trying to connect my two json files to display information on my choropleth map. I have the map rendering, but I'm stuck when it comes to connecting my second json file to the map file. Both files include an id for all items, but the id isn't located in before the object, it's inside, so I'm not sure how to grab it.
Here's what I currently have:
var data; // loaded asynchronously
var width = 600;
var height = 600;
var projection = d3.geo.albers()
//.center([-84.36322, 32.397649]);
.translate([-1000,-200])
.scale([6000]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("#chart")
.append("svg:svg");
var counties = svg.append("svg:g")
.attr("id", "counties")
.attr("class", "Blues");
d3.json("data/myData/simpleGA.json", function(json) {
counties.selectAll("path")
.data(json.features)
.enter().append("svg:path")
.attr("class", data ? quantize : null)
.attr("d", path);
});
d3.json("data/myData/lotteryMapNum.json", function(json) {
data = json;
counties.selectAll("path")
.attr("class", quantize);
});
function quantize(d) {
return "q" + Math.min(8, ~~(data[d.id].hopeDollars * 9 / 12)) + "-9";
}
simpleGA.json
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "id": 0, "properties": { "NAMELSAD10": "Lanier County"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ -83.04292, 30.947296 ], [ -83.05332, 30.94753 ],] ] } }
]
}
lotteryMapNum.json
[
{"COUNTY":"Lanier",
"hopeDollars":12921240,
"id":"0"}
]
New Code for tooltips:
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: ''}); });
});
});
var quantize = d3.scale.quantize()
//.domain([611850, 627698760])
.domain([0, 700000000])
.range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
};
make an empty dictionary with the id as key and the unquantized as value:
var newDict = {};
d3.json("data/myData/lotteryMapNum.json", function(data) {
data.forEach(function(d) { newDict[d.id] = +d.hopeDollars; });
});
then, use the quantize function when setting the path class:
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]); })
feel free to add your null condition back in to check if the id exists.
basically, this will just use check the dictionary value for each path id (d.id), return the quantized value, and set the class accordingly.
also there is a tidier implementation of quantize:
var quantize = d3.scale.quantize()
.domain([0, 1])
.range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
这篇关于缺少d3连接choropleth地图中的数据的步骤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
