selection.order - selectionと同じ順序に並び替える

<p>一番最初の状態(li要素)を、<code>oldSelection</code>という変数に保存してあるよ。<code>oldSelection.order()</code>を使って、<code>oldSelection</code>の順番通りに要素を並び替えるよ。</p> <ul id="target" class="list"> <li>1つ目の要素</li> <li>2つ目の要素</li> <li>3つ目の要素</li> <li>4つ目の要素</li> <li>5つ目の要素</li> </ul> <ul> <li><a id="method1">()内が小さい順に並び替え</a></li> <li><a id="method2">order()</a></li> <li><a id="method3">リセット</a></li> </ul>

.list { padding: 0 0 0 36px ; list-style-type: disc ; } ul { margin: 24px 0 0 ; padding: 0 ; list-style-type: none ; } ul li { margin: 4px 0 0 ; padding: 0 ; } a { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-weight: 700 ; } a:hover { cursor: pointer ; background: #e6e6e6 ; }

// グローバル変数 var oldSelection ; // 初期化 var initial = function() { // li要素にデータを関連付ける oldSelection = d3.selectAll( "#target li" ).data( [ 5, 3, 2, 7, 6 ] ).text( function( d, i ) { return this.textContent + "(" + d + ")" ; } ) ; } // クリックイベント1 document.getElementById( "method1" ).onclick = function() { // li要素を適当な順番に並び替える d3.selectAll( "#target li" ).sort() ; } // クリックイベント2 document.getElementById( "method2" ).onclick = function() { // 要素を、[oldSelection]の順番通りに並び替える oldSelection.order() ; } // クリックイベント3 document.getElementById( "method3" ).onclick = function() { // ul要素を元に戻す d3.select( "ul" ).html( ulContent ) ; // 初期化 initial() ; } // ul要素の中身をリセット用にキャッシュしておく var ulContent = d3.select( "ul" ).node().innerHTML ; // 初期化 initial() ;