c3v列を変更するd3スライダー

Question

私は2001年から2016年までの範囲のd3スライダーと、列名とno_2001〜no_2016のcsvファイルを持っています。 csvは、jsonファイルと一緒にd3.queueで呼び出され、長年にわたり変化するchoroplethマップを構築します。

私の問題は、スライダをドラッグしてcsvファイルの列を変更することです。誰も助けることができますか？ありがとう！

これはこれまで私が行ってきたことです。キュー機能では "+ d.no_2015"を変更する必要がありますが、 "+ d.no_2015"と置き換えると定義した "column"が機能しません。私は右のそれを得た場合は、あなたのスライダーで定義された列は、マップを埋めるために代わりに使用されるように

<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

[OK]を、あなたはあなたのコードを変更する必要があります。もちろん

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

、あなたはスライダーを変更すると、ソースとして別の列を使用して、データの再描画をトリガーするような方法でそれを配線する必要があります：これは、私はトリックを行うだろうと思います。しかし、最初の部分は解決されます。