使用jquery类型滑块迭代csv，并在d3.js柱状图中每次显示一个柱状图

Use a jquery type slider to iterate through a csv and display one bar at a time in a d3.js bar chart

本文关键字：显示 一个 jquery 类型 csv 迭代 并在 使用 js d3      更新时间：2023-09-26

所以我在D3.js中生成一个csv文件的条形图，一个基本列的例子。我想做的是每次只显示一行数据的一个栏。类似于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轴刻度

任何例子也会非常有帮助!我一直在谷歌上疯狂搜索，但我主要是找到影响范围和比例的滑块

这个有很多部分…解析和切片数据，设置x轴，等等。下面是其中一段代码:

d3.select("#slider")
    .on("input", function() {update(+this.value);});
function update(row) {
    viewdata = data.slice((row-1), row);
    redraw();
}

这是一个完整的PLUNK解决方案。注意:为了说明方向，我在代码的几个部分放置了注释。我强烈建议您fork这个plunk，这样如果我不小心删除了它，它就不会丢失了。

相关文章：