selection.sort - 要素を並び替える

投稿日:2016/03/03 / 更新日:2016/03/03

d3.jsのselection.sort()は、d3.selectionオブジェクトの要素を並び替えるメソッドです。

サンプルコード

<ul>
	<li>1つ目のLI</li>
	<li>2つ目のLI</li>
	<li>3つ目のLI</li>
	<li>4つ目のLI</li>
	<li>5つ目のLI</li>
</ul>

// li要素を選択
var selection = d3.selectAll( "li" ) ;

// データを関連付ける
selection = selection.data( [ 5, 3, 2, 7, 6 ] ) ;

// 要素を並び替える (小さい順)
selection.sort() ;

// 要素を並び替える (大きい順)
selection.sort( d3.descending ) ;

デモ

RUN
HTML
CSS
JavaScript

<p><code>sort()</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">大きい順</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 initial = function() { // li要素にデータを関連付ける d3.selectAll( "#target li" ).data( [ 5, 3, 2, 7, 6 ] ).text( function( d, i ) { return d ; } ) ; } // クリックイベント1 document.getElementById( "method1" ).onclick = function() { // li要素を選択 var selection = d3.selectAll( "#target li" ) ; // 要素を並び替える selection.sort() ; } // クリックイベント2 document.getElementById( "method2" ).onclick = function() { // li要素を選択 var selection = d3.selectAll( "#target li" ) ; // 要素を並び替える selection.sort( d3.descending ) ; } // クリックイベント3 document.getElementById( "method3" ).onclick = function() { // ul要素を元に戻す d3.select( "ul" ).html( ulContent ) ; // 初期化 initial() ; } // ul要素の中身をリセット用にキャッシュしておく var ulContent = d3.select( "ul" ).node().innerHTML ; // 初期化 initial() ;

構文

selection = selection.sort( function )

引数
項目	説明
function	省略可。比較用の関数を指定する。比較用の関数は、`function(a, b){ ... }`というように、a要素、b要素の2つを引数にしたもので、戻り値が`true`の場合はa要素が先、`false`の場合はb要素が先となる。この関数が全ての組み合わせで実行されて並び替えられる。オリジナルの関数を指定してもいいし、d3.jsに用意されている`d3.ascending`(小さい順)、または`d3.descending`(大きい順)をそのまま指定してもいい。用意された関数を指定した場合、比較材料となるのは、関連付けられたデータの値。省略時は小さい順となる。

戻り値
項目	説明
selection	ソート後のd3.selectionオブジェクトが戻り値となる。