d3 滑块更改 csv 列

Question

我有一个范围从 2001 到 2016 的 d3 滑块和一个包含列名和 no_2001 到 no_2016 的 csv 文件。 csv 在 d3.queue 中与 json 文件一起调用，以构建多年来变化的等值线图。

我的问题是通过拖动滑块更改 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

好的，如果我做对了，您应该更改您的代码，以便使用您的滑块定义的列来填充您的地图。我认为这可以解决问题：

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

当然，您需要以一种方式连接它，即更改滑块会触发使用不同的列作为源重新绘制数据。但是第一部分已经解决了。

d3 滑块更改 csv 列

d3 slider to change csv column

javascript

csv

queue

slider

d3.js