情報アイランド

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

Node.js+jsdom+D3によるDOMの使用(1)概要

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

  • jsdom
  • cheerio
  • d3

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

d3モジュールの利用

d3モジュールはDOMそのものを提供している訳ではなく、DOMの上で動作するモジュールですので、d3モジュールを利用するにはまずDOMを構築する必要があります。

DOMを構築するにはjsdomモジュールのjsdom.jsdom関数を使用します。

var jsdom = require('jsdom');

global.document = jsdom.jsdom('xxx');

第1引数にHTMLドキュメントを指定します。

返り値としてHTMLドキュメントを表すDOMのドキュメントオブジェクトが得られます。

これをglobal.documentプロパティに設定します

これにより、d3モジュールがDOMを使用することができるようになります。

選択

DOMの使用における最も基本的な操作の1つとして選択があります。

選択とはDOMの単一又は複数の要素から子要素である単一又は複数の要素を1つの操作対象として取り出すことです。

つまり、選択対象から操作対象を取り出すことを選択と言います。そして、選択対象と操作対象は何れもDOMの単一又は複数の要素です。

d3モジュールでは選択対象をグループの親要素と言い、操作対象をセレクションと言います。

選択はグループの親要素毎に行われ、1つのグループの親要素に対して単一又は複数の要素が選択されることになります。そして、セレクションはグループの親要素毎に纏められます。そして、この纏まりをグループと言います。

つまり、1つのセレクションは「選択対象から選ばれたものの集まり」である単一又は複数のグループから成り、1つのグループは「選択対象から選ばれたもの」である単一又は複数の要素から成るという構造になっています。

以後セレクションを表すオブジェクトをselectionで表すものとします。

データ

セレクションの要素にはデータを結び付けることができます。

データはグループ毎に配列として指定します。そして、グループの要素に配列の要素として指定されたデータが1つずつ結び付けられます。

また、データを設定する方法はセレクションに存在するグループが単一であるか複数であるかで大きく変わります。

関連

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

-d3.js, Node.js