Обновление карты choropleth с выпадающей кнопкой

Question

Во-первых, пожалуйста, извините мой бедный английский.
Я работаю над проектом с сеткой-картой и внешним 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 

Если я использую в первой строке я получаю хорошую сетку-карту (see image), но если я пытаюсь получить доступ к значению определенного года из массива options со второй строкой и делать console.log(rateById);, я получаю thi s

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

Вместо этого

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

Answer 1

Fixed здесь: http://jsfiddle.net/z7sLdyu2/2/

2 изменений, чтобы сделать в вашем коде:

Во-первых, ваши варианты выбора не должны содержать код яваскрипта быть (+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"} 
]; 

Затем в цикле, присвоить значение rateById путем доступа к данным d собственности на выбранный год, как это:

rateById[+d.ID] = +d[options[0].selected];

PS: Я должен был удалить часть вашего кода в jsfiddle, а центроиды json не были найдены в вашей версии jsfiddle, что привело к ошибкам, не связанным с проблемой этого вопроса.