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