DC.js-D3.jsの概要

D3.jsは、ブラウザでインタラクティブな視覚化を作成するために使用されるJavaScriptライブラリです。 D3ライブラリを使用すると、データセットのコンテキストでWebページの要素を操作できます。これらの要素はHTML、SVG、またはCanvas要素であり、データセットの内容に応じて導入、削除、または編集できます。これは、DOMオブジェクトを操作するためのライブラリです。 D3.jsは、データ探索の貴重な支援となります。データの表現を制御し、データの対話性を追加できます。

D3.jsは、他のライブラリに比べて最高のフレームワークの1つです。それの訳は; Webおよびデータの視覚化で機能し、エンタープライズグレードです。もう1つの理由は、世界中の開発者が多くの高度なグラフを作成できるようにする柔軟性に優れています。また、機能を大幅に拡張しました。

次のようなD3.jsの基本的な概念を理解しましょう-

セレクション
データ結合
SVG
遷移
アニメーション
D3.js API

これらの概念のそれぞれを詳細に理解しましょう。

セレクション

選択は、D3.jsのコアコンセプトの1つです。 CSSセレクターの概念に基づいています。 JQueryを使用し、すでに知っている人は、選択内容を簡単に理解できます。 CSSセレクターに基づいてDOMを選択し、DOMの要素を変更、追加、削除するオプションを提供できます。

データ結合

データ結合は、D3.jsのもう1つの重要な概念です。選択とともに機能し、データセット（一連の数値）に関してHTMLドキュメントを操作できます。デフォルトでは、D3.jsはメソッド内でデータセットに最高の優先度を与え、データセット内の各アイテムはHTML要素に対応します。

SVG

SVGは Scalable Vector Graphics の略です。 SVGは、XMLベースのベクターグラフィックス形式です。線、長方形、円、楕円などのさまざまな形状を描画するオプションを提供します。したがって、SVGを使用して視覚化を設計すると、より強力で柔軟になります。

変換

SVGは、単一のSVG形状要素またはSVG要素のグループを変換するオプションを提供します。 SVG変換は、変換、拡大縮小、回転、および傾斜をサポートしています。

遷移

遷移とは、アイテムのある状態から別の状態に変化するプロセスです。 D3.jsは、HTMLページで遷移を実行するtransition（）メソッドを提供します。

アニメーション

D3.jsは、遷移によるアニメーションをサポートしています。アニメーションは、トランジションを適切に使用して実行できます。トランジションは、 start と end の2つのキーフレームのみを含むキーフレームアニメーションの限定された形式です。通常、開始キーフレームはDOMの現在の状態であり、終了キーフレームは指定した属性、スタイル、およびその他のプロパティのセットです。遷移は、開始ビューに依存する複雑なコードなしで新しいビューに遷移するのに適しています。

D3.js API

重要なD3.js APIのメソッドの一部を簡単に理解しましょう。

コレクションAPI

コレクションは、複数の要素を単一のユニットにグループ化する単なるオブジェクトです。コンテナとも呼ばれます。オブジェクト、マップ、セット、ネストが含まれています。

パスAPI

パスは、長方形、円、楕円、ポリライン、ポリゴン、直線、曲線を描くために使用されます。 SVGパスは、ストローク、塗りつぶし、クリッピングパスとして使用できる図形、または3つすべての任意の組み合わせが可能な図形の輪郭を表します。

Axis API

D3.jsは、軸を描画する関数を提供します。軸は、線、目盛り、およびラベルで構成されます。軸はスケールを使用するため、各軸にはスケールを指定して作業する必要があります。

Zooming API

ズームは、コンテンツのスケーリングに役立ちます。クリックアンドドラッグアプローチを使用して、特定の地域に集中できます。

区切り文字区切り値API

区切り文字は、プレーンテキストまたはその他のデータの個別の独立した領域間の境界を指定するために使用される1つ以上の文字のシーケンスです。フィールド区切り文字は、コンマで区切られた値のシーケンスです。つまり、区切り文字で区切られた値は、コンマ区切り値（CSV）またはタブ区切り値（TSV）です。

Dcjs-introduction-to-d3js

目次