lower与raise是d3第4版新增的方法,能快速地改变现有DOM元素在父节点中的先后位置。
假定页面中存在的HTML片段如下:
<ul class="list-group" id="list-group">
<li class="list-group-item">0001</li>
<li class="list-group-item">0002</li>
<li class="list-group-item">0003</li>
</ul>
操作的实例代码如下:
var item = d3.select("#list-group")
.selectAll(".list-group-item")
// 必须加上过滤或者排序,否则看不出效果
.filter(function(d) {
return this.textContent == "0002";
})
// 将第2个元素插入到头部
.lower();
// 现在又将其添加到尾部
item.raise();
按照这两个方法名的中文翻译与功能,简单的记忆方法就是低头抬尾变元素(小怪兽),也就是下面的它。