如何使用 d3 在表格中添加分页？答案

【问题标题】：How to add pagination in table using d3?如何使用 d3 在表格中添加分页？
【发布时间】：2016-06-03 13:19:23
【问题描述】：

我有以下代码，我必须在这张桌子上添加分页

<!DOCTYPE html>
<html>
<head>
  <title>table</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<style> 
 .rect {
  outline: 1px solid green;
}
</style> 
</head>
<body>

<div id="table"></div>
<script>
var data = [{
  "name": "a",
  "section": 1,
  "stars": "d1"
}, {
  "name": "b",
  "section": 2,
  "stars": "d2"
}, {
  "name": "c",
  "section": 1,
  "stars": "d3"
}];

var columns = ['name', 'section', 'stars']
  // create table
var table = d3.select("#table").append("table");

var thead = table.append("thead").append("tr");

thead.selectAll("th")
  .data(columns)
  .enter()
  .append("th")
  .text(function(d) {
    return d;
  });

var tbody = table.append("tbody");

data.forEach(function(d, i) {
  trow = tbody.append("tr")
  trow.selectAll("td")
    .data(columns)
    .enter()
    .append("td")
    .append(function(d) {
      if (d == "stars") {
        return document.createElement('button');
      } else
        return document.createElement('div');
    })
    .attr("class", function(d) {
      if (d == "section") {
        return "rect"
      }
    })
    .text(function(e) {
      return d[e]
    });

});
</script>
</body>
</html>

如何在 d3 中添加分页？我必须为每两行设置分页，请提出解决方案。只是我添加了 3 行数据，但我的实际数据包含 50 到 100 行

【问题讨论】：

标签： javascript d3.js nvd3.js

【解决方案1】：

在最简单的级别上，您只需控制表格行的可见性/显示。这个例子就像你得到的一样基本，它使用两个按钮在表格中显示不同的十组 - 没有页码，没有限制，没有样式:-) - 但它进行了分页

http://jsfiddle.net/f50mggof/6/

<div id="buttons">
<button id="up">
UP
</button>
<button id="down">
DOWN
</button>
</div>
<table></table>


var dataset = [];
for (var n = 0; n < 100; n++) {
    dataset.push ([n, Math.random()*50, Math.random()*30]);
}

var rows = d3.select("table").selectAll("tr").data(dataset)
    .enter()
    .append("tr")
  ;

  var cells = rows.selectAll("td").data(function(d) { return d; })
    .enter()
    .append("td")
    .text(function(d) { return d; })
  ;

  d3.select("#buttons").datum({portion : 0});
  // the chain select here pushes the datum onto the up and down buttons also
  d3.select("#buttons").select("#up").on ("click", function(d) {
    d.portion -= 10;
    redraw (d.portion);
  });
   d3.select("#buttons").select("#down").on ("click", function(d) {
    d.portion += 10;
    redraw (d.portion);
  })

  function redraw (start) {
    d3.select("table").selectAll("tr")
        .style("display", function(d,i) {
        return i >= start && i < start + 10 ? null : "none";
      })
  }
  redraw(0);

【讨论】：

我必须根据表格行设置寻呼机
寻呼机如 1,2,3,4
寻呼机也基于行设置