情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

Node.js+jsdom+D3によるDOMの使用(14)データ列の取得と設定

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

  • jsdom
  • cheerio
  • d3

この連載記事ではd3モジュールを利用する方法を取り上げ、この記事ではグループのデータ列の取得と設定を行う方法を説明します。

データ列の取得

セレクションの全ての要素のデータを取得するには要素のセレクションのselection.data関数を使用します。

var d3 = require('d3');

var data = d3.selectAll('xxx').data();

返り値としてデータ列が得られます。

データ列の設定

データ列の設定はグループ毎に行われます。すなわち、グループの夫々の要素に設定する夫々のデータを配列としてグループ毎に指定します。

そして、配列のデータが順番にグループの要素に設定されます。ただし、データをグループの要素に設定する方法を指定することもできます。

また、データ列の設定においては余分なデータや要素が生じることがあります。すなわち、要素に設定されないデータやデータが設定されない要素が生じることがあります。

余分なデータのみから成るセレクションを流入セレクション(enter selection)と言い、余分な要素のみから成るセレクションを流出セレクション(exit selection)と言います。

また、データが設定された要素のみから成るセレクションを更新セレクション(update selection)と言います。

任意のデータ列の設定

要素のデータをグループ毎に任意に設定するには要素のセレクションのselection.data関数を使用します。

var selection = d3.selectAll('xxx').data(function (d, i, nodes) {
    return ['yyy', 'zzz'];
});

第1引数にグループにデータ列を指定するための関数を指定します。この関数の第1引数はグループの親要素のデータであり、第2引数はグループのセレクションにおけるインデックスであり、第3引数はセレクションの全てのグループの親要素です。また、thisはグループの親要素となります。この関数では返り値としてグループに指定するデータ列を返すようにします。

返り値として更新セレクションが得られます。

一定のデータの設定

要素のデータをグループ毎に一定に設定するには要素のセレクションのselection.data関数を使用します。

var selection = d3.selectAll('xxx').data(['yyy', 'zzz']);

第1引数にデータ列を指定します。

返り値として更新セレクションが得られます。

入れ子のセレクションへのデータの設定

入れ子のセレクションの作成とセレクションの要素のデータの設定を行うにはd3.selectAll関数、selection.data関数、selection.selectAll関数、selection.data関数を順番に使用します。

var data = [
    [0, 1], 
    [2, 3]
];

var selection = d3.selectAll('xxx').data(data).selectAll('yyy').data(function(d, i, nodes) {
    return d;
});

最初のd3.selectAll関数の呼び出しによりdocument.documentElementを唯一のグループとするセレクションが得られます。

次のselection.data関数の呼び出しにおいてデータ列の配列を指定することによりセレクションの唯一のグループにデータ列の配列が指定され、グループの要素にデータ列が順番に設定されます。

次のselection.selectAll関数の呼び出しにより元のセレクションの要素をグループとするセレクションが得られます。

最後のselection.data関数の呼び出しにおいてグループの親要素のデータを指定することによりセレクションのグループにデータ列が指定され、グループの要素にデータが順番に設定されます。

データと要素の対応付け

selection.data関数においてデータをグループの要素に設定する方法を指定するには第2引数に関数を指定します。この関数はセレクションの要素毎に呼び出され、データ列のデータ毎にも呼び出されます。

var selection = d3.selectAll('xxx').data(function (d, i, nodes) {
    return ['yyy', 'zzz'];
}, function (d, i, nodes) {
    return 'aaa';
});

セレクションの要素毎に呼び出される場合には第1引数は要素のデータであり、第2引数は要素のセレクションにおけるインデックス(セレクションが複数のグループを有する場合にはグループ内のインデックス)であり、第3引数はセレクションにおいて要素が含まれているグループです。また、thisは要素となります。また、返り値としてキーとなる任意の値を返すようにします。

データ列のデータ毎に呼び出される場合には第1引数はデータであり、第2引数はデータのデータ列におけるインデックスであり、第3引数はデータ列です。また、thisはグループの親要素となります。また、返り値としてキーとなる任意の値を返すようにします。

要素のデータには要素のキーと一致するキーのデータが設定されます

また、要素のグループ内での順序は要素のデータのデータ内での順序と同じになります

サンプルコード1

d3-data.js

var jsdom = require('jsdom');

global.document = jsdom.jsdom(`
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title</title>
    </head>
    <body>
        <table>
            <thead>
                <tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
            </thead>
            <tbody>
                <tr><td>0</td><td>1</td><td>2</td><td>3</td></tr>
                <tr><td>4</td><td>5</td><td>6</td><td>7</td></tr>
                <tr><td>8</td><td>9</td><td>10</td><td>11</td></tr>
                <tr><td>12</td><td>13</td><td>14</td><td>15</td></tr>
            </tbody>
        </table>
    </body>
</html>
`);

var d3 = require('d3');

var data1 = [
    [15, 14, 13, 12, 99], 
    [11, 10, 9, 8, 99], 
    [7, 6, 5, 4, 99], 
    [3, 2, 1, 0, 99], 
    [99, 99, 99, 99, 99]
];

var selection1 = d3.selectAll('tbody tr').data(data1).selectAll('td').data(function(d, i, nodes) {
    return d;
});

console.log(selection1.data());

var data2 = [
    [8, 7, 6], 
    [5, 4, 3], 
    [2, 1, 0]
];

var selection2 = d3.selectAll('tbody tr').data(data2).selectAll('td').data(function(d, i, nodes) {
    return d;
});

console.log(selection2.data());

使用パッケージ

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

実行結果

C:\work\node>node d3-data.js
[ 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0 ]
[ 8, 7, 6, 5, 4, 3, 2, 1, 0 ]

関連

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-d3.js, Node.js