<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var data = [
{name: "Locke", number: 4},
{name: "Reyes", number: 8},
{name: "Ford", number: 15},
{name: "Jarrah", number: 16},
{name: "Shephard", number: 31},
{name: "Kwon", number: 34}
];
d3.selectAll("div")
.data(data, function(d) { console.log(d);return d ? d.name : this.id; })
.text(function(d) { return d.number; });
</script>
</body>
如上面的代码，得到的网页是空白的那个键值的function一直用不了
div改为：
<div id="Ford"></div>
<div id="Jarrah"></div>
<div id="Kwon"></div>
<div id="Locke"></div>
<div id="Reyes"></div>
<div id="Shephard"></div>
若是空的标签，要先data绑定数据再使用键值函数
<script src="https://d3js.org/d3.v5.js"></script>
<body>
<p></p>
<p></p>
<p></p>
<script>
//未绑定键值
var persons = [{id: 3, name:"1xx"},
{id: 6, name:"2xx"},
{id: 9, name:"3xx"}];
var p = d3.select("body").selectAll("p");
//先对数据进行绑定
p.data(persons).text(function(d){return d.id + " : " + d.name;});
var persons = [{id: 6, name:"1xx"},
{id: 3, name:"2xx"},
{id: 9, name:"3xx"}];
var p = d3.select("body").selectAll("p");
//再根据键值排序
p.data(persons, function(d){return d.id;}).text(function(d){return d.id + " : " + d.name;});
</script>
</body>