Node.js+jsdom+D3によるDOMの使用（２０）要素のソート

2016/12/09

1 要素のソート
2 サンプルコード1
3 関連

DOMを使用するには下のようなモジュールを利用する方法があります。

jsdom
cheerio
d3

この連載記事ではd3モジュールを利用する方法を取り上げ、この記事では要素のソートを行う方法を説明します。

連載記事一覧

（１）概要（２）DOM全体からの要素の選択（３）セレクションからの要素の選択（４）テキストの取得と設定（５）HTMLの取得と設定（６）属性の取得と設定（７）クラスの取得と設定（８）スタイルの取得と設定（９）プロパティの取得と設定（１０）要素に対する処理の実行（１１）要素の取得（１２）要素数の取得

要素のソート

要素をソートするには要素のセレクションの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());

使用パッケージ

jsdom
npm install jsdomでインストールします。
D3
npm install d3でインストールします。

実行結果

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>