Node.js+jsdom+D3によるDOMの使用（１５）流入セレクションの取得
DOMを使用するには下のようなモジュールを利用する方法があります。
jsdomcheeriod3
この連載記事ではd3モジュールを利用する方法を取り上げ、この記事では流入セレクションの取得を行う方法を説明します。
連載記事一覧
（１）概要 （２）DOM全体からの要素の選択 （３）セレクションからの要素の選択 （４）テキストの取得と設定 （５）HTMLの取得と設定 （６）属性の取得と設定 （７）クラスの取得と設定 （８）スタイルの取得と設定 （９）プロパティの取得と設定 （１０）要素に対する処理の実行 （１１）要素の取得 （１２）要素数の取得
流入セレクション
更新セレクションから流入セレクションを取得するにはselection.enter関数を使用します。
var d3 = require('d3');
var selection = d3.selectAll('xxx').data(['kkk', 'lll']).enter();
返り値として流入セレクションが得られます。
ただし、selectionが更新セレクションでない場合には空のセレクションが返ります。
サンプルコード1
d3-enter.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;
}).enter();
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;
}).enter();
console.log(selection2.data());
使用パッケージ
実行結果
C:\work\node>node d3-enter.js
[ 99, 99, 99, 99 ]
[]
関連
スポンサーリンク