情報アイランド

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

Node.js+jsdom+D3によるDOMの使用(19)更新セレクションと流入セレクションの結合

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

  • jsdom
  • cheerio
  • d3

この連載記事ではd3モジュールを利用する方法を取り上げ、この記事では更新セレクションと流入セレクションの結合を行う方法を説明します。

セレクションの結合

更新セレクションと流入セレクションを結合するには更新セレクションのselection.merge関数を使用します。

var d3 = require('d3');

var update = d3.selectAll('xxx').data(['kkk', 'lll']);
var enter = update.enter();
var merge = update.merge(enter);

返り値として結合したセレクションが得られます。

サンプルコード1

d3-merge.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</p>
        <p id="p2" class="even">paragraph</p>
        <p id="p3" class="odd">paragraph</p>
        <p id="p4" class="even">paragraph</p>
        <p id="p5" class="odd">paragraph</p>
    </body>
</html>
`);

var d3 = require('d3');

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

var update = d3.selectAll('xxx').data(data);
var enter = update.enter().append('p');
var merge = update.merge(enter);

update.text(function (d, i, nodes) {
    return 'update ' + d;
});
enter.text(function (d, i, nodes) {
    return 'enter ' + d;
});

update.each(function (d, i, nodes) {
    console.log(d3.select(this).text());
});
enter.each(function (d, i, nodes) {
    console.log(d3.select(this).text());
});
merge.each(function (d, i, nodes) {
    console.log(d3.select(this).text());
});

使用パッケージ

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

実行結果

C:\work\node>node d3-merge.js
enter 4
enter 3
enter 2
enter 1
enter 0
enter 99
enter 4
enter 3
enter 2
enter 1
enter 0
enter 99

関連

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

-d3.js, Node.js