Node.js+jsdom+D3によるDOMの使用(20)要素のソート
DOMを使用するには下のようなモジュールを利用する方法があります。
jsdom
cheerio
d3
この連載記事ではd3
モジュールを利用する方法を取り上げ、この記事では要素のソートを行う方法を説明します。
連載記事一覧
(1)概要 (2)DOM全体からの要素の選択 (3)セレクションからの要素の選択 (4)テキストの取得と設定 (5)HTMLの取得と設定 (6)属性の取得と設定 (7)クラスの取得と設定 (8)スタイルの取得と設定 (9)プロパティの取得と設定 (10)要素に対する処理の実行 (11)要素の取得 (12)要素数の取得
要素のソート
要素をソートするには要素のセレクションのselection.sort
関数を使用します。
var d3 = require('d3');
var selection = d3.selectAll('xxx').data(['kkk', 'lll']).sort(function (l, r) {
return 1;
//or
return 0;
//or
return -1;
});
第1引数に要素を比較する処理を関数として指定します。
この関数の第1引数と第2引数は比較する要素のデータです。
この関数では返り値として第1引数の要素が第2引数の要素より小さい場合には負数を返し、大きい場合には正数を返し、同じである場合には0
を返すようにします。
返り値としてセレクションが得られます。
サンプルコード1
d3-sort.js
var jsdom = require('jsdom');
global.document = jsdom.jsdom(`
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<p id="p1" class="odd">paragraph 1</p>
<p id="p2" class="even">paragraph 2</p>
<p id="p3" class="odd">paragraph 3</p>
<p id="p4" class="even">paragraph 4</p>
<p id="p5" class="odd">paragraph 5</p>
</body>
</html>
`);
var d3 = require('d3');
var data = [66, 4, 90, 23, 56];
console.log(d3.select('body').html());
d3.selectAll('p').data(data).text(function (d, i, nodes) {
return d3.select(this).text() + ' (' + d + ')';
}).sort(function (l, r) {
return l - r;
});
console.log(d3.select('body').html());
使用パッケージ
実行結果
C:\work\node>node d3-sort.js
<p id="p1" class="odd">paragraph 1</p>
<p id="p2" class="even">paragraph 2</p>
<p id="p3" class="odd">paragraph 3</p>
<p id="p4" class="even">paragraph 4</p>
<p id="p5" class="odd">paragraph 5</p>
<p id="p2" class="even">paragraph 2 (4)</p><p id="p4" class="even">paragraph 4 (23)</p><p id="p5" class="odd">paragraph 5 (56)</p><p id="p1" class="odd">paragraph 1 (66)</p><p id="p3" class="odd">paragraph 3 (90)</p>
関連

スポンサーリンク