Javascript D3 choropleth图未正确填充
我有一张D3地图，它应该根据美国各州在某一范围内的情况来填充它们。我没有让D3为我确定这个范围，数据是这样的，0，5，1，10作为分位数 我遇到的问题是，各县没有按照其所在区域填充适当的颜色。我知道这一点，因为我可以通过工具提示查看值。这几乎就好像有另一个值被切割成了分位数 有一个复杂的地方是，我有一个下拉列表来选择一个额外的变量来填充地图（对于这些变量，相同的分位数是合适的） 下面是我认为我的问题所在，初始代码、updateMap函数或图例本身。谢谢你的建议Javascript D3 choropleth图未正确填充,javascript,d3.js,Javascript,D3.js,我有一张D3地图，它应该根据美国各州在某一范围内的情况来填充它们。我没有让D3为我确定这个范围，数据是这样的，0，5，1，10作为分位数 我遇到的问题是，各县没有按照其所在区域填充适当的颜色。我知道这一点，因为我可以通过工具提示查看值。这几乎就好像有另一个值被切割成了分位数 有一个复杂的地方是，我有一个下拉列表来选择一个额外的变量来填充地图（对于这些变量，相同的分位数是合适的） 下面是我认为我的问题所在，初始代码、updateMap函数或图例本身。谢谢你的建议 var width = 800,
var width = 800,
height = 500;
var statById = d3.map();
var quantile = d3.scale.quantile()
.domain([0,.5,1,10])
.range(['white','blue','red', 'green']);
function updateMap(key){
quantile.domain(counties.map(function(d){return d[key];}));
countyShapes
.transition().duration(1000).ease(d3.ease('linear'))
.attr("fill", function(d) {
if (statById.get(d.id)){
if(statById.get(d.id)[key] == 0){
return 'white';
}
else{
return quantile(statById.get(d.id)[key]);
}
}
else{
errorArray.push(d.id);
return "white";
}});
}
var legend = svg.selectAll('g.legendEntry')
.data(quantile.range().reverse())
.enter()
.append('g').attr('class', 'legendEntry');
legend
.append('rect')
.attr("x", width - 780)
.attr("y", function(d, i) {
return i * 20;
})
.attr("width", 10)
.attr("height", 10)
.style("stroke", "black")
.style("stroke-width", 1)
.style("fill", function(quantile){return quantile;});
//the data objects are the fill colors
legend
.append('text')
.attr("x", width - 760) //leave 5 pixel space after the <rect>
.attr("y", function(d, i) {
return i * 20;
})
.attr("dy", "0.8em") //place text one line *below* the x,y point
.text(function(d,i) {
var extent = quantile.invertExtent(d);
//extent will be a two-element array, format it however you want:
var format = d3.format("0.2f");
return format(+extent[0]) + " - " + format(+extent[1]);
});
var宽度=800，
高度=500；
var statById=d3.map（）；
变量分位数=d3.scale.quantile（）
.domain（[0,5,1,10]）
.范围（[‘白色’、‘蓝色’、‘红色’、‘绿色’）；
函数更新映射（键）{
分位数域（countries.map（函数（d）{returnd[key]；}））；
乡村形态
.transition（）.duration（1000）.ease（d3.ease（'linear'））
.attr（“填充”，函数（d）{
if（statById.get（d.id））{
if（statById.get（d.id）[key]==0）{
返回“白色”；
}
否则{
返回分位数（statById.get（d.id）[key]）；
}
}
否则{
errorArray.push（d.id）；
返回“白色”；
}});
}
var legend=svg.selectAll（'g.legendEntry'）
.data（分位数.range（）.reverse（））
.输入（）
.append（'g'）.attr（'class'，'legendEntry'）；
传奇
.append（'rect'）
.attr（“x”，宽度-780）
.attr（“y”，函数（d，i）{
返回i*20；
})
.attr（“宽度”，10）
.attr（“高度”，10）
.style（“笔划”、“黑色”）
.style（“笔划宽度”，1）
.style（“填充”，函数（分位数）{返回分位数；}）；
//数据对象是填充颜色
传奇
.append（'文本'）
.attr（“x”，宽度-760）//在
.attr（“y”，函数（d，i）{
返回i*20；
})
.attr（“dy”，“0.8em”）//将文本放在x，y点*下方一行*处
.文本（功能（d，i）{
var范围=分位数反相器范围（d）；
//扩展数据块将是一个两元素数组，可根据需要对其进行格式化：
var格式=d3.格式（“0.2f”）；
返回格式（+区段[0]）+“-”+格式（+区段[1]）；
});
<script>
var width = 800,
height = 500;
var statById = d3.map();
var quantile = d3.scale.quantile()
.domain([0,.5,1,10])
.range(['white','blue','red', 'green']);
var path = d3.geo.path();
var svg = d3.select("#map")
.attr("width", width)
.attr("height", height)
.append('svg:g')
.call(d3.behavior.zoom().on("zoom", redraw))
.append('svg:g');
svg.attr("transform", "scale( " + .9 + ")");
function redraw() {
console.log("here", d3.event.translate, d3.event.scale);
svg.attr("transform",
"translate(" + d3.event.translate + ")"
+ " scale(" + d3.event.scale + ")");
}
d3.select("#selectPer")
.on("change", function(){menuChange();});
d3.select("#selectType")
.on("change", function(){menuChange();});
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6)
.style("background", "rgba(250,250,250,.7)");
tooltip.append("span").attr("id", "countyName")
queue()
.defer(d3.json, "us.json")
.defer(d3.csv, "mvpfinal020715.csv")
.defer(d3.json, "countyPop.json")
.await(ready);
errorArray = [];
var counties;
var countyPop;
function ready(error, us, countiesJSON, countyPopJSON) {
counties = countiesJSON;
countyPop = countyPopJSON;
counties.forEach(function(d){
try{
d.lq_11 = +d['lq_11'];
d.lq_21 = +d['lq_21'];
d.lq_22 = +d['lq_22'];
d.lq_23 = +d['lq_23'];
d.lq_42 = +d['lq_42'];
d.lq_51 = +d['lq_51'];
d.lq_52 = +d['lq_52'];
d.lq_53 = +d['lq_53'];
d.lq_55 = +d['lq_55'];
d.lq_56 = +d['lq_56'];
d.lq_61 = +d['lq_61'];
d.lq_62 = +d['lq_62'];
d.lq_71 = +d['lq_71'];
d.lq_72 = +d['lq_72'];
d.lq_81 = +d['lq_81'];
d.lq_92 = +d['lq_92'];
statById.set(+d.fips, d);
if (isNaN('white')){
}
}
catch(e){
//remove double lines of csv
}
});
quantile.domain(counties.map(function(d){return d.subPerCap;}));
countyShapes = svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.enter().append("path")
countyShapes
.attr("fill", "rgb(200,200,200)")
.attr("d", path)
.on("mouseover", function(d){
d3.select(this)
.attr("stroke", "red")
.attr("stroke-width", 1)
tooltip
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 5) + "px")
.transition().duration(300)
.style("opacity", 1)
.style("display", "block")
updateDetails(statById.get(d.id));
})
.on("mouseout", function(d){
d3.select(this)
.attr("stroke", "")
.attr("stroke-width", .2)
tooltip.transition().duration(700).style("opacity", 0);
});
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
.attr("class", "states")
.attr("d", path);
menuChange();
}
var printDetails = [
{'var': 'fips', 'print': 'FIPS'},
{'var': 'lq_21', 'print': 'Mining'},
{'var': 'lq_23', 'print': 'Construction'},
{'var': 'lq_51', 'print': 'Information'},
{'var': 'lq_52', 'print': 'Finance'},
{'var': 'No Criminal Conviction Return', 'print': 'Paperwork Returns'},
{'var': 'none', 'print': ''},
{'var': 'population', 'print': 'Population'},
{'var': 'Activation Date', 'print': 'Start Date'}];
function updateDetails(county){
tooltip.selectAll("div").remove();
tooltip.selectAll("div").data(printDetails).enter()
.append("div")
.append('span')
.text(function(d){return (d.print.length > 0) ? d.print + ": " : " - ";})
.attr("class", "boldDetail")
.insert('span')
.text(function(d){
if (d.var != 'none'){
return (""+county[d.var]).indexOf('/') == -1 ? totalFormat(county[d.var]) : county[d.var];
}})
.attr("class", "normalDetail");
d3.select("#countyName").text(county.County);
}
var totalFormat = d3.format(",");
function menuChange(){
var selectPer = document.getElementById('selectPer');
selectPerValue = selectPer.options[selectPer.selectedIndex].value;
var selectType = document.getElementById('selectType');
selectTypeValue = selectType.options[selectType.selectedIndex].value;
var keyName = selectTypeValue + (selectPerValue == 'PerCap' ? 'PerCap' : '');
console.log(keyName);
updateMap(keyName);
console.log(d3.sum(counties, function(d){return d[selectTypeValue];}));
var num = d3.sum(counties, function(d){return d[selectTypeValue];});
d3.select("#magicNum")
.text(selectPerValue == 'PerCap' ? d3.round(num*10000/313000000, 3) + " per 100,000" : totalFormat(num));
}
function updateMap(key){
quantile.domain(counties.map(function(d){return d[key];}));
countyShapes
.transition().duration(1000).ease(d3.ease('linear'))
.attr("fill", function(d) {
if (statById.get(d.id)){
if(statById.get(d.id)[key] == 0){
return 'white';
}
else{
return quantile(statById.get(d.id)[key]);
}
}
else{
errorArray.push(d.id);
return "white";
}});
}
var legend = svg.selectAll('g.legendEntry')
.data(quantile.range().reverse())
.enter()
.append('g').attr('class', 'legendEntry');
legend
.append('rect')
.attr("x", width - 780)
.attr("y", function(d, i) {
return i * 20;
})
.attr("width", 10)
.attr("height", 10)
.style("stroke", "black")
.style("stroke-width", 1)
.style("fill", function(quantile){return quantile;});
//the data objects are the fill colors
legend
.append('text')
.attr("x", width - 760) //leave 5 pixel space after the <rect>
.attr("y", function(d, i) {
return i * 20;
})
.attr("dy", "0.8em") //place text one line *below* the x,y point
.text(function(d,i) {
var extent = quantile.invertExtent(d);
//extent will be a two-element array, format it however you want:
var format = d3.format("0.2f");
return format(+extent[0]) + " - " + format(+extent[1]);
});
</script>
可变宽度=800，
高度=500；
var statById=d3.map（）；
变量分位数=d3.scale.quantile（）
.domain（[0,5,1,10]）
.范围（[‘白色’、‘蓝色’、‘红色’、‘绿色’）；
var path=d3.geo.path（）；
var svg=d3。选择（“映射”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.append（'svg:g'）
.call（d3.behavior.zoom（）.on（“缩放”，重绘））
.append（'svg:g'）；
attr（“transform”、“scale”（.9+））；
函数重画（）{
log（“这里”，d3.event.translate，d3.event.scale）；
attr（“转换”，
“translate（“+d3.event.translate+”）
+“比例（“+d3.event.scale+”）；
}
d3.选择（“选择者”）
.on（“change”，function（）{menuChange（）；}）；
d3.选择（“选择类型”）
.on（“change”，function（）{menuChange（）；}）；
变量工具提示=d3。选择（“主体”）。追加（“div”）
.attr（“类”、“工具提示”）
.样式（“不透明度”，1e-6）
.style（“背景”、“rgba（250250.7）”）；
工具提示.append（“span”）.attr（“id”、“countyName”）
队列（）
.defer（d3.json，“us.json”）
.延迟（d3.csv，“mvpfinal020715.csv”）
.defer（d3.json，“countyPop.json”）
.等待（准备好）；
errorArray=[]；
var县；
var countyPop；
函数就绪（错误，us，countiesJSON，CountyOpJSON）{
县=县JSON；
countyPop=countyPopJSON；
县。forEach（功能（d）{
试一试{
d、 lq_11=+d['lq_11']；
d、 lq_21=+d['lq_21']；
d、 lq_22=+d['lq_22']；
d、 lq_23=+d['lq_23']；
d、 lq_42=+d['lq_42']；
d、 lq_51=+d['lq_51']；
d、 lq_52=+d['lq_52']；
d、 lq_53=+d['lq_53']；
d、 lq_55=+d['lq_55']；
d、 lq_56=+d['lq_56']；
d、 lq_61=+d['lq_61']；
d、 lq_62=+d['lq_62']；
d、 lq_71=+d['lq_71']；
d、 lq_72=+d['lq_72']；
d、 lq_81=+d['lq_81']；
d、 lq_92=+d['lq_92']；
标准集（+d.fips，d）；
if（isNaN（'white'））{
}
}
捕获（e）{
//删除csv的两行
}
});
分位数域（countries.map（函数（d）{returnd.subPerCap；}））；
countyShapes=svg.append（“g”）
.attr（“类”、“县”）
.selectAll（“路径”）
.data（topojson.feature（us，us.objects.countries）.features）
.enter（）.append（“路径”）
乡村形态
.attr（“填充”、“rgb（200200）”）
.attr（“d”，路径）
.on（“鼠标悬停”，功能（d）{
d3.选择（本）
.attr（“笔划”、“红色”）
.attr（“笔划宽度”，1）
工具提示
.style（“左”（d3.event.pageX+5）+“px”）
.style（“顶部”（d3.event.pageY-5）+“px”）
.transition（）.持续时间（300）
.style（“不透明度”，1）
.style（“显示”、“块”）
updateDetails（statById.get（d.id））；
})
.开启（“鼠标出”，功能（d）{
d3.选择（本）
.attr（“笔划”，“笔划”）
.attr（“笔划宽度”，.2）
tooltip.transition（）.duration（700）.style（“不透明度”，0）；
});
追加（“路径”）
.datum（topojson.mesh（us，us.objects.states，函数（a，b）{返回a！==b；}））