d3.table.201702200818

Create a table with d3.js.

by ytyaru

HTML

<script src="http://d3js.org/d3.v4.min.js"></script>
<table id="NameList">
  <thead></thead>
  <tbody></tbody>
</table>
<table id="License">
  <tr><th>Library</th><th>License</th><th>Copyright</th></tr>
  <tr><th><a href="https://d3js.org/">d3.js</a></th><th><a href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause</a></th><th><a href="https://github.com/d3/d3/blob/master/LICENSE">Copyright 2010-2016 Mike Bostock</a></th></tr>
</table>

CSS

#License {
  font-size: 10px;
  margin-top: 30px;
}

JavaScript

heads = ["Id", "Name"];
tr = d3.select("#NameList").select("thead").append("tr");
tr.selectAll("th").data(heads).enter().append("th").text(function(d){return d;});

datas = [[0, "山田"],[1, "鈴木"],[2, "高橋"]];
d3.select("#NameList").select("tbody")
.selectAll("tr")
  .data(datas)
  .enter()
  .append("tr")
.selectAll("td")
  .data(function(row){return row;})
  .enter()
  .append("td")
  .text(function(col){return col;});