情報アイランド

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

Node.js+jsdom+D3によるDOMの使用(3)セレクションからの要素の選択

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

  • jsdom
  • cheerio
  • d3

この連載記事ではd3モジュールを利用する方法を取り上げ、この記事ではセレクションから要素を選択する方法を説明します。

セレクションからの要素の選択

d3モジュールにはセレクションから要素を選択するための関数が幾つか提供されています。

単一の要素の選択

セレクションの夫々の要素に対して単一の要素を選択するにはselection.select関数を使用します。

var d3 = require('d3');

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

第1引数にセレクションの夫々の要素に対して単一の要素を選択するための関数を指定します。この関数の第1引数は元の要素のデータであり、第2引数は元の要素のセレクションにおけるインデックス(セレクションが複数のグループを有する場合にはグループ内のインデックス)であり、第3引数はセレクションにおいて元の要素が含まれているグループです。また、thisは元の要素となります。この関数では返り値として単一の要素を返すようにします。ただし、nullを返すこともできます。

返り値として元のセレクションと同じグループを有し、第1引数の関数の返り値の単一の要素をグループの要素とするセレクションが得られます。

つまり、この関数はセレクションのグループに対しては何ら影響を与えません。返り値のセレクションのグループは元のセレクションのグループと同じです。

そのため、この関数はセレクションの全ての要素を別の要素に置き換えるものであると考えることもできます。元のセレクションの要素に結び付けられたデータも別の要素に引き継がれます

複数の要素の選択

セレクションの夫々の要素に対して複数の要素を選択するにはselection.selectAll関数を使用します。

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

第1引数にセレクションの夫々の要素に対して複数の要素を選択するための関数を指定します。この関数の第1引数は元の要素のデータであり、第2引数は元の要素のセレクションにおけるインデックス(セレクションが複数のグループを有する場合にはグループ内のインデックス)であり、第3引数はセレクションにおいて元の要素が含まれているグループです。また、thisは元の要素となります。この関数では返り値として複数の要素を配列として返すようにします。

返り値として元のセレクションの要素をグループの親要素とし、第1引数の関数の返り値の複数の要素をグループの要素とするセレクションが得られます。

つまり、この関数はセレクションのグループに対して影響を与えます。返り値のセレクションのグループは元のセレクションのグループと異なります

そして、元のセレクションの要素が新しいセレクションのグループの親要素となります。

そのため、この関数は入れ子の選択を行うものであると考えることもできます。元のセレクションの要素に結び付けられたデータはグループの親要素に結び付けられたデータとなります

最初の要素の選択

セレクションの夫々の要素からCSSセレクタに合致する最初の要素を選択するにはselection.select関数を使用します。

var selection = d3.select('xxx').select('yyy');

第1引数にCSSセレクタを指定します。

返り値として元のセレクションと同じグループを有し、元のセレクションの要素の、CSSセレクタに合致する最初の要素をグループの要素とするセレクションが得られます。

ただし、CSSセレクタに合致する要素が存在しなかった場合にはグループの要素はnullとなります。

全ての要素の選択

セレクションの夫々の要素からCSSセレクタに合致する全ての要素を選択するにはselection.selectAll関数を使用します。

var selection = d3.select('xxx').selectAll('yyy');

第1引数にCSSセレクタを指定します。

返り値として元のセレクションの要素をグループの親要素とし、元のセレクションの要素の、CSSセレクタに合致する全ての要素をグループの要素とするセレクションが得られます。

ただし、CSSセレクタに合致する要素が存在しなかった場合にはグループの要素は空となります。

サンプルコード1

d3-selection-select.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');

console.log(d3.selectAll('tr').select('td'));
console.log(d3.selectAll('tr').selectAll('td'));

使用パッケージ

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

実行結果

C:\work\node>node d3-selection-select.js
Selection {
  _groups: [ [ [Object], [Object], [Object], [Object], [Object] ] ],
  _parents:
   [ Element {
       _childNodesList: null,
       _ownerDocument: [Object],
       _childrenList: null,
       _version: 3,
       _memoizedQueries: {},
       _readonly: false,
       _namespaceURI: 'http://www.w3.org/1999/xhtml',
       _prefix: null,
       _localName: 'html',
       _attributes: NamedNodeMap {},
       _settingCssText: false,
       _style: [Object],
       _attached: true,
       _attachedToDocument: true } ] }
Selection {
  _groups:
   [ NodeList { '0': [Object], '1': [Object], '2': [Object], '3': [Object] },
     NodeList { '0': [Object], '1': [Object], '2': [Object], '3': [Object] },
     NodeList { '0': [Object], '1': [Object], '2': [Object], '3': [Object] },
     NodeList { '0': [Object], '1': [Object], '2': [Object], '3': [Object] },
     NodeList { '0': [Object], '1': [Object], '2': [Object], '3': [Object] } ],
  _parents:
   [ Element {
       _childNodesList: null,
       _ownerDocument: [Object],
       _childrenList: null,
       _version: 4,
       _memoizedQueries: [Object],
       _readonly: false,
       _namespaceURI: 'http://www.w3.org/1999/xhtml',
       _prefix: null,
       _localName: 'tr',
       _attributes: NamedNodeMap {},
       _settingCssText: false,
       _style: [Object],
       _attached: true,
       _attachedToDocument: true },
     Element {
       _childNodesList: null,
       _ownerDocument: [Object],
       _childrenList: null,
       _version: 4,
       _memoizedQueries: [Object],
       _readonly: false,
       _namespaceURI: 'http://www.w3.org/1999/xhtml',
       _prefix: null,
       _localName: 'tr',
       _attributes: NamedNodeMap {},
       _settingCssText: false,
       _style: [Object],
       _attached: true,
       _attachedToDocument: true },
     Element {
       _childNodesList: null,
       _ownerDocument: [Object],
       _childrenList: null,
       _version: 4,
       _memoizedQueries: [Object],
       _readonly: false,
       _namespaceURI: 'http://www.w3.org/1999/xhtml',
       _prefix: null,
       _localName: 'tr',
       _attributes: NamedNodeMap {},
       _settingCssText: false,
       _style: [Object],
       _attached: true,
       _attachedToDocument: true },
     Element {
       _childNodesList: null,
       _ownerDocument: [Object],
       _childrenList: null,
       _version: 4,
       _memoizedQueries: [Object],
       _readonly: false,
       _namespaceURI: 'http://www.w3.org/1999/xhtml',
       _prefix: null,
       _localName: 'tr',
       _attributes: NamedNodeMap {},
       _settingCssText: false,
       _style: [Object],
       _attached: true,
       _attachedToDocument: true },
     Element {
       _childNodesList: null,
       _ownerDocument: [Object],
       _childrenList: null,
       _version: 4,
       _memoizedQueries: [Object],
       _readonly: false,
       _namespaceURI: 'http://www.w3.org/1999/xhtml',
       _prefix: null,
       _localName: 'tr',
       _attributes: NamedNodeMap {},
       _settingCssText: false,
       _style: [Object],
       _attached: true,
       _attachedToDocument: true } ] }

関連

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

-d3.js, Node.js