情報アイランド

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

Node.js+jsdom+D3によるDOMの使用(17)要素の追加

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

  • jsdom
  • cheerio
  • d3

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

最後の子要素の追加

要素の最後の子要素として別の要素を追加するには要素のセレクションのselection.append関数を使用します。

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

第1引数に要素名を指定します。

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

返り値として元のセレクションと同じグループを有し、追加された要素をグループの要素とするセレクションが得られます。

元のセレクションの要素に結び付けられたデータも追加された要素に引き継がれます

要素の直前への子要素の追加

要素の子要素の直前に子要素として別の要素を追加するには要素のセレクションのselection.insert関数を使用します。

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

第1引数に要素名を指定します。

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

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

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

返り値として元のセレクションと同じグループを有し、追加された要素をグループの要素とするセレクションが得られます。

元のセレクションの要素に結び付けられたデータも追加された要素に引き継がれます

流入セレクションに対する要素の追加

グループの親要素の子要素として流入セレクションのデータに対応する要素を追加するにもselection.append関数を使用します。

var selection = d3.selectAll('xxx').data(['kkk', 'lll']).enter().append('yyy');
var selection = d3.selectAll('xxx').data(['kkk', 'lll']).enter().append(function (d, i, nodes) {
    return document.createElement('yyy');;
});

サンプルコード1

d3-append.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>
            </tbody>
        </table>
    </body>
</html>
`);

var d3 = require('d3');

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

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

var selection = d3.selectAll('tbody tr').selectAll('td');

console.log(selection.data());

使用パッケージ

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

実行結果

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

関連

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

-d3.js, Node.js