乐趣区

关于d3v5版本的data的属性排序

官网给的解决方案

<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 的值

退出移动版