官网给的解决方案
<div id="Ford"></div>
<div id="Jarrah"></div>
<div id="Kwon"></div>
<div id="Locke"></div>
<div id="Reyes"></div>
<div id="Shephard"></div>
var data = [{name: "Locke", number: 4},
{name: "Reyes", number: 8},
{name: "Ford", number: 15},
{name: "Jarrah", number: 16},
{name: "Shephard", number: 23},
{name: "Kwon", number: 42}
];
d3.selectAll("div")
.data(data, function(d) {return d ? d.name : this.id;})
.text(function(d) {return d.number;});
解释说明下:
按照一般的排序规则,把 d.name 给到 d3 就行了,可是 d 是 undefined。接收不到值,所以把值给 d3 的任务就交给了后面的 this.id。要注意的是前面你要按照 d.name 排序后面给的值就不能是 d.number
总结一下:
前面的 d.name:要按这个排序
后面的 this.id:就是 d.name 的值