使用 jquery 类型滑块遍历 csv 并在 d3.js 条形图中一次显示一个条形图

Question

所以我在 D3.js 中使用 csv 文件生成条形图，例如 basic columns example。我想要做的是每行数据一次只显示一个条形图。类似 JQuery 的滑块将遍历 csv 行并更新图表。对于用户来说，它看起来就像单条的高度在变化，但 x 轴也应该随着日期而更新。

这是我将要输入的数据示例：

DATE,INFLOW (CF),OUTFLOW (CF),STORAGE (CF)
20120101,950400,28857600,11084277600
20120102,60912000,28771200,11099959200
20120103,56505600,28857600,11130451200
20120104,55900800,28771200,11158765200
20120105,55987200,28771200,11189692800
20120106,56419200,28771200,11220620400
20120107,55123200,28684800,11246756400

我真正想要显示的唯一内容是 DATE 和 STORAGE (CF)。所以我可能不得不在某个地方对 CSV 进行一些解析，以使其处于最佳状态。

我已经尝试过这个并且会发布一些代码，但我所有的尝试都是一团糟。我可以一次生成一个包含所有行的合理条形图，但是当我尝试显示一个时，一切都会中断。以下是我可以使用一些指导的挑战：

1. 如何使用滑块拼接或过滤我的 csv，以便只选择一行
2. 生成条形图的最佳方法，该条形图在 csv 中的单行中只有一个条形（每次我尝试这样做时，我都会在轴和正确访问数组值方面遇到问题）
3. 更新条形的最佳方式，仅更改高度，同时更新 x 轴刻度

此外，任何示例都会非常有帮助！一直在疯狂搜索，但我主要是在寻找影响范围和比例的滑块

Answer 1

这有很多部分......解析和切片数据，设置x轴等。这是代码的一部分。

d3.select("#slider")
    .on("input", function() {update(+this.value);});

function update(row) {
    viewdata = data.slice((row-1), row);
    redraw();
}

这是一个完整的PLUNK 解决方案。注意：我在代码的几个部分中放置了 cmets，用于定位。我强烈建议你 fork 这个 plunk，这样如果我不小心删除它就不会丢失。