d3选择集合的操作方法(四):sort与order

      sort方法只能对带有数据的元素进行排序，因此如果对页面已有的元素但没有绑定数据的元素进行排序，则需要进行预处理，order能将已排序的元素但已改变顺序的元素(如通过raise与lower方法)恢复为排序初始状态，并且性能表现更佳。
依旧假定页面中存在的html元素如下：

<ul class="list-group" id="list-group">
    <li class="list-group-item">0002</li>
    <li class="list-group-item">0001</li>
    <li class="list-group-item">0003</li>
</ul>

      说明sort与order使用方法的示例代码如下：

var items = d3.select("#list-group")
                .selectAll(".list-group-item")
                //  对元素进行预处理
                .each(function(d) {
                    //  为已有的元素添加数据
                    if(d === undefined) {
                        d3.select(this).datum({
                            index : parseInt(this.textContent)
                        })
                    }
                })
                //  只能比较数据，并且会改变数据相关的DOM
                .sort(function(a, b) {
                    //  逆序
                    return b.index - a.index;
                })

      执行完上面的代码后，现在html元素已经是逆序排列了，如下：

<ul class="list-group" id="list-group">
    <li class="list-group-item">0003</li>
    <li class="list-group-item">0002</li>
    <li class="list-group-item">0001</li>
</ul>

      通过raise与lower改变html元素的排序，然后再用order将排序恢复，如下：

//  将第二个元素提前
items.filter(function(d) {
    return d.index === 2
}).lower();
//  又恢复为逆序了，速度极快
items.order();