d3选择集合的操作方法(三):lower与raise

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();             

按照这两个方法名的中文翻译与功能，简单的记忆方法就是低头抬尾变元素(小怪兽)，也就是下面的它。