使用下拉按钮更新choropleth地图
Updating a choropleth map with a dropdown button
首先,请原谅我英语不好
我正在做一个有网格地图和外部csv的项目。
网格图不是由矩形或六边形组成的,而是仅具有将在末尾使用的任何类型的符号的质心
所以我有一个Topojson文件,其质心为"ID",质心为"坐标"。
外部CSV由几个列组成,第一列具有相同的质心"ID",另一列具有不同年份的值。
"ID","C2001","C2002","C2003","C2004","C2005","C2006","C2007","C2008","C2009","C2010","C2000"
6050,"-5.55753","-5.55914","-5.75444","-5.76307","-5.81660","-5.99361","-6.02150","-6.15979","-5.73530","-6.30509","-5.52990"
6051,"-5.55753","-5.55914","-5.75444","-5.76307","-5.81660","-5.99361","-6.02150","-6.15979","-5.73530","-6.30509","-5.52990"
这是我的代码
var width = 960,
height = 600;
var options = [
{date: "2000", selected: "+d.C2000"},
{date: "2001", selected: "+d.C2001"},
{date: "2002", selected: "+d.C2002"},
{date: "2003", selected: "+d.C2003"},
{date: "2004", selected: "+d.C2004"},
{date: "2005", selected: "+d.C2005"},
{date: "2006", selected: "+d.C2006"},
{date: "2007", selected: "+d.C2007"},
{date: "2008", selected: "+d.C2008"},
{date: "2009", selected: "+d.C2009"},
{date: "2010", selected: "+d.C2010"},
];
var color = d3.scale.threshold()
.domain([-1985, -1400, -1000, -700, -300, -100, -25, -0])
.range(["#7f0000", "#b30000", "#d7301f", "#ef6548", "#fc8d59", "#fdbb84", "#fdd49e", "#fee8c8", "#fff7ec"]);
var path = d3.geo.path()
.projection(null)
.pointRadius(1.5);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
queue()
.defer(d3.json, "CO2_light.json")
.defer(d3.csv, "tdd_CO2_emissions.csv")
.await(ready);
function ready(error, centroid, CO2) {
var rateById = {};
console.log(rateById); //To
//CO2.forEach(function(d) { rateById[+d.ID] = +d.C2000; }); WORKING FINE = value in rateById
CO2.forEach(function(d) { rateById[+d.ID] = options[0].selected; }); //NOT WORKING = inside rateById "+d.C2000" instead the value
svg.selectAll("path")
.data(topojson.feature(centroid, centroid.objects.CENTROID).features)
.enter().append("path")
.attr("class", "centerGrid")
.attr("d", path)
.style("fill", function(d) { return color(rateById[+d.properties.ID]); });
d3.select(".loading").remove();
现在我把按钮留给下一个问题,我专注于下面的这两行
//CO2.forEach(function(d) { rateById[+d.ID] = +d.C2000; }); WORKING FINE = value in rateById
CO2.forEach(function(d) { rateById[+d.ID] = options[0].selected; }); //NOT WORKING = inside rateById "+d.C2000" instead the value
如果我使用第一行,我会得到一个很好的网格图(见图),但如果我试图用第二行从options
数组中访问特定年份的值,并执行console.log(rateById);
,我会获得这个
Object
6050: "+d.C2000"
6051: "+d.C2000"
6712: "+d.C2000"
而不是这个
Object
6050: -6.30509
6051: -6.30509
6712: -7.0441
此处已修复:http://jsfiddle.net/z7sLdyu2/2/
代码中要做的2个更改:
首先,您选择的选项不应包含要执行的javascript代码(+d.
),而应仅包含年份值:
var options = [
{date: "2000", selected: "C2000"},
{date: "2001", selected: "C2001"},
{date: "2002", selected: "C2002"},
{date: "2003", selected: "C2003"},
{date: "2004", selected: "C2004"},
{date: "2005", selected: "C2005"},
{date: "2006", selected: "C2006"},
{date: "2007", selected: "C2007"},
{date: "2008", selected: "C2008"},
{date: "2009", selected: "C2009"},
{date: "2010", selected: "C2010"}
];
然后在循环中,通过访问所选年份的数据d
属性来分配rateById
值,如下所示:
rateById[+d.ID] = +d[options[0].selected];
附言:我不得不在你的jsfiddle中删除你的部分代码,因为在你的版本中找不到质心json,导致了与这个问题无关的错误。
相关文章:
- Javascript循环不会自我更新
- 添加文字和评论功能更新Div
- AngularJS:ng之后,重复$scope值未按预期更新
- 如何通过数组更新角度子范围
- Ajax聊天消息重复而不仅仅是更新
- 通过CSV文件上载更新数据库表
- 平均值:无法将数据更新到数据库
- $rootScope未使用forEach进行更新
- d3基于用户选择动态更新节点
- 有条件更新d3.js力图中节点的最佳方法
- Angular:更新一次性绑定的数据
- Javascript更新孙窗口中的表单元素
- 使用AngularJS中的筛选器更新给定的表
- 从选项页面更新chrome扩展清单权限
- 如何在不刷新页面的情况下更新显示框
- 延期承诺值未更新/解析/延期
- 标记的实时更新,无需加载页面谷歌地图API V3
- 使用mongodb更新中的一个变量
- 使用下拉按钮更新choropleth地图
- 传单.js choropleth示例-基于单独的数据文件更新颜色