Question

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

如果没有将CSV文件分成20个组，并且每次点击“下一个”时加载下一个CSV文件，我不知道如何进行此操作。

Answer 1

根据dataviz的类型（例如条形图），3000项肯定是太多了。但是，关于文件大小通常没那么多。

话虽如此，而不是在包含20行的多个文件中将其剪切掉，而是在一个CSV中一次加载所有项目，并且每次只显示20个（这是您的问题和＃39;标题说）。

要剪切数据数组，请使用slice：

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

这是一个基本演示：

＆＃13;

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)
  }
})

＆＃13;

p {
    margin: 2px;
}

＆＃13;

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

＆＃13;

仅使用d3.js

1 个答案: