4.4.0D3.jsは、データにもとづいて動的にコンテンツを描くJavaScriptライブラリです。HTMLやSVG、CSSなどのWeb標準にのっとって、モダンブラウザにデータを可視化します。本稿はライブラリの基本的な使い方と構文について、かいつまんでご説明します。D3.jsをインストールするライブラリはD3.jsサイトからダウンロードできます(図001)。本稿執筆時のバージョンは、4.4.0です。GitHubでソースが公開されています。CDNを使う場合には、つぎのコードをコピーしてください。要素を選択して設定するD3ではHTMLのDOM要素を選択して、その操作やCSSなどの定めが加えられます。<body>要素に<p>要素が、つぎのように複数加えられていたとします。6</p>もちろん、組み込み済みのJavaScriptで、つぎのように<p>要素すべてを取り出してスタイル(styleプロパティ)を変えることはできます。'lightskyblue';}D3であれば、要素を順にすべて取り出すというコードは書かずに済みます。d3.selectAll()メソッドが、引数のセレクタに合う要素すべてを対象に定められるからです。つぎのようにselection.style()メソッドを用いて、対象の要素(<p>)すべてにスタイルが割り当てられます。'lightskyblue');また、つぎのようにd3.select()メソッドを使うと、引数のセレクタに合う最初の要素が選べます。その後の、スタイルなどの定め方は同じです。これらのコード例は、以下のサンプル001でjsdo.itに掲げました。(DOM)の仕様にもとづいています。CSSと同じように、属性やクラス、IDなどが扱えます。Reference」をご参照ください。プロパティを動的に定めるセレクタで要素を定めるというのは、jQueryと似ています。D3では、さらにデータに対する関数で、プロパティの値が決められます。selection.style()メソッドの第2引数に関数(function)をつぎのように与えると、選択された要素が順に受け取られて処理されます。要素のテキストにランダムな色が加えられるのです。50%)';})関数はデータとそのインデックスを、ふたつの引数として受け取ります。JavaScriptコードをつぎのように書き替えれば、奇数番の要素のカラーはグレー(sylver)に定められます。'sylver';})関数の第1引数に渡すデータは、selection.data()メソッドに配列で与えます。すると、つぎのように順に受け取る配列エレメントの値を、プロパティの定めに用いることができるのです。これで、テキストの文字の大きさが、配列データにしたがって変わります。});selectionオブジェクトのメソッドは、もとの参照を返します。したがって、同じオブジェクトに対してメソッドを呼び出すなら、ドット(.)でつなげて、つぎのようにひとつのステートメントにできます。このコード例は、以下にサンプル002としてjsdo.itに掲げました。enter()とexit()メソッドselection.enter()メソッドを用いると、選択にノードが加えられます。selection.exit()メソッドで、ノードの追加を終えます。<body>要素に加える<p>要素の数は、つぎのように少し減らしましょう。6</p>-->つぎのようにメソッドselection.enter()に続けてselection.append()を呼び出すことにより、要素が加えられます。要素はデータと組みになりますので、以下のようにデータに足りない分の要素が新たに増えることになるのです。要素のテキストは、selection.text()メソッドで与えます。5!改めて、つぎのようにメソッドselection.data()でデータを定めてselection.text()を呼び出すと、要素のテキストが書き替えられます。このとき、selection.append()メソッドで加えた要素のテキストは、以下のように変わらないことにご注意ください。5!すると、与えられたデータには、まだ要素と組み合わせられていない残りがあります。つぎのようにselection.append()メソッドを呼び出せば、新たにその数だけ要素は加わります。6つぎのように、メソッドselection.exit()に続けてselection.remove()を呼び出せば、その後ノードは加わりません。結果が確かめやすいように、以下のサンプル003をjsdo.itに掲げます。プロパティの値を滑らかなアニメーションで変えるselection.transition()メソッドを使うと、プロパティの変化にアニメーションが加えられます。つぎのように、続けてselection.style()メソッドを呼び出せば、背景色が滑らかに移り変わります。アニメーションの時間をミリ秒で決めるのが、transition.duration()メソッドです。'midnightblue');また、transition.delay()メソッドはアニメーションを始める前の待ち時間をミリ秒数で与えます。つぎのように、関数で要素ごとに決めることもできます。transition.ease()メソッドに、アニメーションの値の変え方がd3-easeメソッドで定められるのです。ここでは、d3.easeElasticOut()を選びました。この項のコード例を、以下にサンプル004としてjsdo.itに掲げます。「D3.js入門」シリーズのリンクを追加。