d3滑块更改csv列答案

【问题标题】：d3 slider to change csv columnd3滑块更改csv列
【发布时间】：2016-09-17 12:38:21
【问题描述】：

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

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

【问题讨论】：

我不知道你想在这里实现什么……而且，代码不完整。 rateById 和 showData 是什么？此外，当您调用函数cssColumn 时，该值将被完全忽略，因为它没有分配给变量或以任何形式使用。请解释你的策略。
嗨，showData 使用 json 文件构建地图，不受滑块的影响。 var rateById = d3.map(); 有助于为地图着色，查看 csv 文件中“no_2015”列中的值。我喜欢存储滑块的刻度值，例如2014，并将 rateById 函数中的“no_2015”替换为“no_2014”。我没有在这段代码中使用cssColumn 的输出，因为如果我用+d.column 替换+d.no_2015，它就不起作用。感谢您的帮助。
好的，看看下面的答案，看看有没有帮助！

标签： javascript csv d3.js slider queue

【解决方案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>

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

【讨论】：