d3.data.object.201702201237

In d3.js, handle object with data () as an array.

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

obj = {"id": 100, "name": "木村"};
root = d3.select("body").insert("div",":first-child");

root.append("div").selectAll("p").data(function(d){return d3.keys(obj)}).enter().append("p").text(function(d){return d;});

root.append("div").selectAll("p").data(function(d){return d3.values(obj)}).enter().append("p").text(function(d){return d;});