Question

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

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

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

d3滑块更改csv列

1 个答案: