d3 слайдер для изменения столбца csv

Question

У меня есть ползунок d3 с диапазоном от 2001 до 2016 и файл csv с именами столбцов и no_2001 до no_2016. Csv вызывается в d3.queue вместе с json-файлом для создания карты choropleth, меняющейся с годами.

Моя проблема заключается в том, чтобы изменить столбец csv-файла, перетащив ползунок. Может ли кто-нибудь помочь? Благодаря!

Это то, что у меня есть до сих пор. В функции очереди «+ d.no_2015» нужно изменить, но мой определенный «столбец» не работает, если я заменил его на «+ d.no_2015».

<h2>Year: <span id="year">2016</span></h2> 
<div id="slider"></div> 

<script> 

function csvColumn(data){ 
    column = "no_" + data; 
    return column // this does not work 
}; 

d3.select('#slider').call(d3.slider() 
    .min(2001) 
    .max(2016) 
    .value(2016) 
    .step(1) 
    .axis(d3.svg.axis().tickFormat(d3.format(".0f")).ticks(16)) 
    .on("slide", function(evt, value) { 
    d3.select('#year').text(value); 
    csvColumn(value); 
})); 

var rateById = d3.map(); 

d3_queue.queue() 
     .defer(d3.json, "de_landkreis.json") 
     .defer(d3.csv, "maserndaten.csv", function(d) {rateById.set(d.name, +d.no_2015);}) //here the slider has to act. +d.column does not work. 
     .await(showData); 

function showData(error, de_landkreis) { ... } 
</script> 

Answer 1

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

<h2>Year: <span id="year">2016</span></h2> 
<div id="slider"></div> 

<script> 
// This is the default value 
var selectedColumn = "no_2014"; 

function csvColumn(data){ 
    return "no_" + data; 
}; 

d3.select('#slider').call(
    d3.slider() 
    .min(2001) 
    .max(2016) 
    .value(2016) 
    .step(1) 
    .axis(d3.svg.axis().tickFormat(d3.format(".0f")).ticks(16)) 
    .on("slide", function(evt, value) { 
     d3.select('#year').text(value); 
     selectedColumn = csvColumn(value); 
    }) 
); 

var rateById = d3.map(); 

d3_queue.queue() 
    .defer(d3.json, "de_landkreis.json") 
    .defer(d3.csv, "maserndaten.csv", function(d) { 
    rateById.set(d.name, +d[csvColumn(selectedValue)]); 
    }) 
    .await(showData); 

function showData(error, de_landkreis) { ... } 
</script> 

Конечно, вам нужно будет подключить его таким образом, что изменение ползунка вызывает перерисовки данных, используя другой столбец в качестве источника. Но первая часть решена.