Node.js+jsdom+D3によるDOMの使用（１９）更新セレクションと流入セレクションの結合
DOMを使用するには下のようなモジュールを利用する方法があります。
jsdomcheeriod3
この連載記事ではd3モジュールを利用する方法を取り上げ、この記事では更新セレクションと流入セレクションの結合を行う方法を説明します。
連載記事一覧
（１）概要 （２）DOM全体からの要素の選択 （３）セレクションからの要素の選択 （４）テキストの取得と設定 （５）HTMLの取得と設定 （６）属性の取得と設定 （７）クラスの取得と設定 （８）スタイルの取得と設定 （９）プロパティの取得と設定 （１０）要素に対する処理の実行 （１１）要素の取得 （１２）要素数の取得
セレクションの結合
更新セレクションと流入セレクションを結合するには更新セレクションの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());
});
使用パッケージ
実行結果
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
関連
スポンサーリンク