Javascript 使用下拉按钮更新choropleth贴图

首先，请原谅我英语不好。
我正在做一个带有栅格地图和外部csv的项目

栅格地图不是由矩形或六边形组成的，而是只有将在最后使用的任何类型符号的质心。
所以我有一个带有质心“ID”和质心“坐标”的Topojson文件

外部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

如果我使用第一行，我会得到一个很好的网格图（），但是如果我试图用第二行和do

console.log（rateById）从
options
数组访问特定年份的值我明白了

Object
6050: "+d.C2000"
6051: "+d.C2000"
6712: "+d.C2000"

而不是这个

Object
6050: -6.30509
6051: -6.30509
6712: -7.0441

修正如下：

代码中要做的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[选项[0]。选中]

注意：我必须删除JSFIDLE中的部分代码，因为在您的JSFIDLE版本中找不到json质心，导致与此问题无关的错误。
rateById[+d.ID]=options[0]。选中只执行您要求它执行的操作。选项[0]的值。所选为“+d.C2000”。您希望查找CO2文件的值，为此，您需要正确格式化csv文件数据（在对象中，以便能够基于年份和质心Id访问值）。您是否介意创建一个JSFIDLE以使其更容易帮助您？它是这样的：Thank a lotIs是rateById函数中必需的+d.ID加号？.ID值是非整数。你不需要ID的+号，你可以去掉它。你回答得太快了，我现在不能在那里。它的工作就像一个魅力！谢谢你！（法语）