情報アイランド

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

Node.js+jsdom+D3によるDOMの使用(16)流出セレクションの取得

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

  • jsdom
  • cheerio
  • d3

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

流出セレクション

更新セレクションから流出セレクションを取得するにはselection.exit関数を使用します。

var d3 = require('d3');

var selection = d3.selectAll('xxx').data(['kkk', 'lll']).exit();

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

ただし、selectionが更新セレクションでない場合には空のセレクションが返ります。

サンプルコード1

d3-exit.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;
}).exit();

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

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;
}).exit();

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

使用パッケージ

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

実行結果

C:\work\node>node d3-exit.js
3
7
11

関連

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

-d3.js, Node.js