D3.js （または単にD3）は、データを処理および視覚化するためのJavaScriptライブラリです。 データ配列の処理とロード、およびDOM要素の作成に便利なユーティリティを提供します。 このメモでは、ライブラリの基本的なメソッドの操作について説明します。ライブラリの基本を学習し、そのロジックと機能に没頭するのに適しています。
JS、HTML、およびCSSの知識は、記事を理解するのに役立ちます。
流体インターフェース
D3は、流れるようなインターフェイスと呼ばれるアプローチを実装しています。 コードを読むとき、それはメソッドのチェーンのように見えます。 各メソッドは、前のメソッドを返したオブジェクトで呼び出されます。 コードを読みやすくするために、各呼び出しは別々の行にあります。
d3.select('body')
この例はjsfiddle.netにありますサンプリング
D3では、DOM要素を操作する他のJSライブラリと同様に、ドキュメントとの対話は、ドキュメント内の要素の検索と
選択の作成（要素セットのラッパー）から始まります。 ライブラリメソッドにアクセスして、選択した要素を変更できます。
D3の
選択は、
d3.select（）および
d3.selectAll（）メソッドを使用して作成されます。 選択を作成するために、D3はquerySelector / querySelectorAllまたはSizzleをページに接続している場合（たとえば、jQueryを使用）使用します。
d3.select('span')
結果の選択は、要素の操作およびサブ選択の作成に使用されます。
<span> </span> <p> <span> </span> <span></span> <span></span> <span></span> </p> <p> </p>
d3.select('span')
この例はjsfiddle.netにあります現在作業しているサンプルを常に覚えておいてください。 D3を使用する場合の一般的なエラー：親ではなく子孫要素を呼び出し、存在しない（削除された、またはまだ作成されていない）要素のプロパティを変更しようとしています。
この例では、要素に対する操作（
selection.style（name [、value]） ）を既に使用しているので、それらについてさらに詳しく検討します。
値とファンクターの計算
DOMを操作するために、D3はすべての呼び出しに同様のAPIを使用します。 人気のあるタスクの例を見てみましょう：要素のクラスを追加または削除します。 これを行うには、いくつかのサンプリング方法が必要です。
var pressed = false var button = d3.select('button')
この例はjsfiddle.netにありますbutton変数に保存された選択を使用することに注意してください：（classed、attr、style、property、html、textと同様に）の呼び出しは、それらが呼び出される選択を返します。
D3は転送された値を同様の方法で処理します。 ドキュメントに[値]が表示されている場合、次のことについて話している可能性があります。
- 関数である値を送信すると、データ、インデックスパラメーター（下記参照）で呼び出され、コンテキスト（このオブジェクト）は要素、DOMノードになります。
- 関数ではない値を指定すると、「ファンクター」（常に渡された値を返す関数）にラップされます
- 値を指定しない場合、関数はゲッターとして機能し、問題の値を返します（たとえば、selection.style（ 'color'）は、要素に設定されている場合はテキストの色を返します）。
呼び出しのチェーンを構築する場合は、最後のニュアンスを覚えておくことが重要です（通常、このようなゲッターはチェーンの最後の要素である必要があります）。
選択内の各要素に対して値または関数が1回使用され、その後D3はそれらを「忘れる」ことを理解することが重要です。 言い換えると、データセットまたはドキュメント内のイベントを変更しても、D3が値を強制的に「再計算」することはないため、上記のクラスで行ったように、この動作を個別に設定する必要があります。
関数の引数（データとインデックス）に注意してください。 これらには特別な意味があります。インデックスは選択範囲内の要素の番号であり、データはそれに指定されたデータ要素です。 サンプルで呼び出される各関数にこれらのパラメーターが存在することは、D3で最も重要な契約の1つです。 これにより、データに応じて要素のプロパティの状態を計算する簡潔なコードを作成できます。
典型的なサンプリング
選択によってドキュメントのDOMノードを操作する方法を示す、より複雑な例の一般的な方法を検討してください。
var svg = d3.select('body').append('svg') svg .append('text') .text('click somewhere') .attr('x', 50) .attr('y', 50) var events = [] svg.on('click', function () { events.push(d3.event) if (events.length > 5) events.shift() var circles = svg.selectAll('circle') .data(events, function (e) { return e.timeStamp }) .attr('fill', 'gray') circles .enter() .append('circle') .attr('cx', function (d) { return dx || d.pageX }) .attr('cy', function (d) { return dy || d.pageY }) .attr('fill', 'red') .attr('r', 10) circles .exit() .remove() })
この例はjsfiddle.netにあります関連セット
この例では、
data（）メソッドに特別な注意を払う必要があり
ます 。 他のメソッドとは異なり、要素のリストに加えて、データと要素の対応を格納する変更された選択を返します。 記事「
Thinking with Joins 」の
翻訳では、このような選択が持つ
enter（）および
exit（）メソッドと、それらが提供する可能性について詳しく説明しています。
アニメーションとカスタマイズ
D3の要素のプロパティの変更をアニメーション化するのは簡単です;
selection.transition（）メソッドを呼び出す必要があります。 このメソッドは、現在の値を徐々に新しい値に変更してアニメーション効果を作成する選択範囲を返します。 アニメーションの継続時間は、
transition.duration（）メソッドによって設定されます。
前の例に要素を追加および削除するときにアニメーションを追加します。
var svg = d3.select('body').append('svg') svg .append('text') .text('click here') .attr('x', 50) .attr('y', 50) var events = [] svg.on('click', function () { events.push(d3.event) if (events.length > 5) events.shift() var circles = svg.selectAll('circle') .data(events, function (e) { return e.timeStamp }) .attr('fill', 'gray') circles .enter() .append('circle') .attr('cx', function (d) { return dx || d.pageX }) .attr('cy', function (d) { return dy || d.pageY }) .attr('fill', 'red') .attr('r', 0)
この例はjsfiddle.netにありますこの記事では、D3のサンプリング機能について説明しました。 データの処理とロード、SVG要素のセットの描画、およびインタラクティブな視覚化要素の作成のためのユーティリティに、以下の注意を払う予定です。
「データの視覚化」コースでD3を教えています。 このツールを習得し、作業に適用し始めたい場合は、私たちに来てください。 次のコースは今週末にモスクワで開催され、1月のコースの参加者からの記録とフィードバック： http : //brainwashing.pro/dataviz 。