javascript - 使用 jquery 类型的 slider 遍历 csv 并在 d3.js 条形图中一次显示一个条形图

Question

所以我在 D3.js 中使用一个 csv 文件生成条形图 basic columns example .我想要做的是一次只为每一行数据显示一个条形图。类似 JQuery 的 slider 将遍历 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

我真正想要展示的唯一东西是日期和存储 (CF)。因此，我可能必须在某个地方对 CSV 文件进行一些解析，以使其处于最佳状态。

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

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

此外，任何示例都会非常有帮助!一直在疯狂地谷歌搜索，但主要是找到影响范围和比例的 slider

Answer 1

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

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

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

这是一个完整的 PLUNK与解决方案。注意:我在代码的几个部分放置了注释，以供引用。我强烈建议你 fork 这个 plunk，这样它就不会在我不小心删除时丢失。