javascript - 使用 d3.js 仅显示 csv 文件中的 20 行数据

Question

<分区>

Answer 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>