仅使用 d3.js 显示来自 csv 文件的 20 行数据 [关闭]答案

【问题标题】：Only display 20 rows of data from a csv file with d3.js [closed]仅使用 d3.js 显示来自 csv 文件的 20 行数据 [关闭]
【发布时间】：2017-03-08 18:59:51
【问题描述】：

我想弄清楚的是一种创建脚本的方法，该脚本将在加载包含 3000 多个条目的完整 CSV 文件后，从 CSV 文件中获取前 20 行数据，并且只显示 20 个条形图中的时间。这样我就可以有两个按钮，每次可以在 20 行数据之间来回切换，而不是一次显示所有 3000 个条形图，从而使图表甚至不可读。

没有将 CSV 文件分成 20 个组，每次单击“下一步”时都加载下一个 CSV 文件，我什至不知道该怎么做。

【问题讨论】：

7rystan 如果需要，请复制答案，因为由于问题因不清楚而被搁置，我将很快删除答案。
如果我将帖子更新为更清晰，这样它就不会被删除，可以吗？答案正是我所需要的。
它被搁置为不清楚。因此，您当然可以编辑问题以使其更清楚（实际上，这就是搁置的目的：让 OP 有机会澄清他/她的问题）。

标签： javascript csv d3.js

【解决方案1】：

根据数据可视化的类型（例如条形图），3000 项肯定太多了。但是，文件大小通常并没有那么多。

话虽如此，与其将其拆分为具有 20 行的多个文件，不如在单个 CSV 中一次加载所有项目，并且每次仅显示 20 个（这就是您的问题标题说）。

要切割数据数组，使用slice:

var slicedData = data.slice(begin, end);

这是一个基本的演示：

var body = d3.select("body");
body.append("p").html("ID -- VALUE<br>");
var index = 0

d3.csv("https://gist.githubusercontent.com/ffishman/a8cd485c44bee39b68c7a5c7fad14f17/raw/fad1cd9a10f313c06ec65bd8ab289c818536681c/flare.csv", function(data) {
  d3.select("#bt2").on("click", () => {
    var newData = data.slice(index, index + 20);
    index += 20;
    update(newData);
  })

  d3.select("#bt1").on("click", () => {
    index -= 20;
    var newData = data.slice(index - 20, index);
    update(newData)
  })

  function update(newData) {
    var par = body.selectAll(".par")
      .data(newData, d => d.id);

    par.exit().remove();

    par.enter()
      .append("p")
      .attr("class", "par")
      .merge(par)
      .html(d => d.id + " -- " + d.value)
  }
})

p {
    margin: 2px;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<button id="bt1">Previous 20</button>
<button id="bt2">Next 20</button>

【讨论】：