D3js-quick-guide

提供：Dev Guides
移動先:案内、検索

D3.js-はじめに

データの視覚化とは、データを画像形式またはグラフィカル形式で表示することです。 データの視覚化の主な目的は、統計グラフィックス、プロット、情報グラフィックスを介して情報を明確かつ効率的に伝えることです。

データの視覚化は、洞察を迅速かつ効果的に伝えるのに役立ちます。 視覚化によって表されるあらゆるタイプのデータにより、ユーザーはデータを比較し、分析レポートを生成し、パターンを理解することができるため、意思決定に役立ちます。 データの視覚化は、ユーザーがチャート内の特定のデータを分析できるように、インタラクティブにすることができます。 さて、データの視覚化は、さまざまなJavaScriptフレームワークを使用して、通常のWebサイトやモバイルアプリケーションでも開発および統合できます。

D3.jsとは何ですか？

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

D3.jsが必要な理由

D3.jsは、他のライブラリと比較して最高のフレームワークの1つです。 これは、Web上で動作し、そのデータの視覚化が卓越しているためです。 うまく機能したもう1つの理由は、その柔軟性によるものです。 既存のWebテクノロジーとシームレスに連携し、ドキュメントオブジェクトモデルの任意の部分を操作できるため、クライアントサイドWebテクノロジースタック（HTML、CSS、およびSVG）と同じくらい柔軟です。 コミュニティのサポートが充実しており、習得が容易です。

D3.jsの機能

D3.jsは最高のデータ視覚化フレームワークの1つであり、ユーザーとの対話および遷移効果とともに、単純な視覚化と複雑な視覚化を生成するために使用できます。 その顕著な特徴のいくつかを以下に示します-

  • 非常に柔軟です。
  • 使いやすく、高速。
  • 大規模なデータセットをサポートします。
  • 宣言型プログラミング。
  • コードの再利用性。
  • 多種多様な曲線生成機能を備えています。
  • データをHTMLページの要素または要素のグループに関連付けます。

D3.jsの利点

D3.jsはオープンソースプロジェクトであり、プラグインなしで動作します。 それは非常に少ないコードを必要とし、次の利点を思い付きます-

  • 優れたデータ視覚化。
  • モジュラーです。 使用したいD3.jsの小さな断片をダウンロードできます。 毎回ライブラリ全体をロードする必要はありません。
  • チャート作成コンポーネントを簡単に構築できます。
  • DOM操作。

次の章では、システムにD3.jsをインストールする方法を理解します。

D3.js-インストール

この章では、D3.js開発環境をセットアップする方法を学びます。 始める前に、次のコンポーネントが必要です-

  • D3.jsライブラリ
  • 編集者
  • ウェブブラウザ
  • Webサーバー

手順を1つずつ詳しく見ていきましょう。

D3.jsライブラリ

D3.jsを使用してデータの視覚化を作成するには、D3.jsライブラリをHTML Webページに含める必要があります。 私たちは次の2つの方法でそれを行うことができます-

  • プロジェクトのフォルダーからD3.jsライブラリを含めます。
  • CDN（コンテンツ配信ネットワーク）のD3.jsライブラリを含めます。

D3.jsライブラリをダウンロードする

D3.jsはオープンソースのライブラリであり、ライブラリのソースコードはhttps://d3js.org/のWebサイトで無料で入手できます。 D3.js Webサイトにアクセスして、D3.jsの最新バージョン（d3.zip）をダウンロードします。 現在、最新バージョンは4.6.0です。

ダウンロードが完了したら、ファイルを解凍し、 d3.min.js を探します。 これは、D3.jsソースコードの縮小版です。 d3.min.jsファイルをコピーして、プロジェクトのルートフォルダーまたはすべてのライブラリファイルを保持する他のフォルダーに貼り付けます。 以下に示すように、HTMLページにd3.min.jsファイルを含めます。

例-次の例を考えてみましょう。 

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "/path/to/d3.min.js"></script>
   </head>

   <body>
      <script>
        //write your d3 code here..
      </script>
   </body>
</html>

D3.jsはJavaScriptコードであるため、すべてのD3コードを「script」タグ内に記述する必要があります。 既存のDOM要素を操作する必要がある場合があるため、「body」タグの終わりの直前にD3コードを記述することをお勧めします。

CDNからD3ライブラリを含める

D3.jsライブラリを使用するには、コンテンツ配信ネットワーク（CDN）からHTMLページに直接リンクします。 CDNは、ファイルがホストされ、地理的な場所に基づいてユーザーに配信されるサーバーのネットワークです。 CDNを使用する場合、ソースコードをダウンロードする必要はありません。

以下に示すように、CDN URL [[1]]

例-次の例を考えてみましょう。 

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
        //write your d3 code here..
      </script>
   </body>
</html>

D3.jsエディター

コードの記述を開始するには、エディターが必要です。 次のようなJavaScriptをサポートする優れたIDE（統合開発環境）がいくつかあります-

  • Visual Studioコード
  • WebStorm
  • エクリプス
  • 崇高なテキスト

これらのIDEは、最新のJavaScriptフレームワークの一部をサポートするだけでなく、インテリジェントなコード補完を提供します。 派手なIDEがない場合は、メモ帳、VIなどの基本的なエディターをいつでも使用できます。

ウェブブラウザ

D3.jsは、IE8以前を除くすべてのブラウザーで動作します。

Webサーバー

ほとんどのブラウザは、ローカルファイルシステムからローカルHTMLファイルを直接提供します。 ただし、外部データファイルの読み込みに関しては一定の制限があります。 このチュートリアルの後半の章では、 CSV や JSON などの外部ファイルからデータをロードします。 したがって、最初からWebサーバーをセットアップする方が簡単です。

任意のWebサーバーを使用できます。 IIS、Apacheなど

ページを表示する

ほとんどの場合、HTMLファイルをWebブラウザーで開くだけで表示できます。 ただし、外部データソースを読み込む場合は、ローカルWebサーバーを実行し、サーバー*（http：//localhost：8080）*からページを表示する方が信頼性が高くなります。

D3.js-コンセプト

D3.jsは、オープンソースのJavaScriptライブラリです-

  • ドキュメントオブジェクトモデル（DOM）のデータ駆動型操作。
  • データと形状の操作。
  • 線形、階層、ネットワーク、および地理データの視覚要素をレイアウトします。
  • ユーザーインターフェイス（UI）状態間のスムーズな移行を可能にします。
  • 効果的なユーザー対話を可能にします。

Web標準

D3.jsを使用して視覚化を作成する前に、Web標準に精通する必要があります。 次のWeb標準は、D3.jsで頻繁に使用されます。

  • ハイパーテキストマークアップ言語（HTML）
  • ドキュメントオブジェクトモデル（DOM）
  • カスケードスタイルシート（CSS）
  • スケーラブルベクターグラフィックス（SVG）
  • JavaScript

これらの各Web標準を1つずつ詳しく見ていきましょう。

ハイパーテキストマークアップ言語（HTML）

ご存じのように、HTMLはWebページのコンテンツを構造化するために使用されます。 拡張子が「l」のテキストファイルに保存されます。

例-典型的な最低限のHTMLの例は次のようになります 

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title></title>
   </head>

   <body>
   </body>
</html>

ドキュメントオブジェクトモデル（DOM）

HTMLページがブラウザによって読み込まれると、階層構造に変換されます。 HTMLのすべてのタグは、親子階層を持つDOMの要素/オブジェクトに変換されます。 これにより、HTMLがより論理的に構造化されます。 DOMが形成されると、ページ上の要素の操作（追加/変更/削除）が簡単になります。

次のHTMLドキュメントを使用してDOMを理解しましょう- 

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>My Document</title>
   </head>

   <body>
      <div>
         <h1>Greeting</h1>
         <p>Hello World!</p>
      </div>
   </body>
</html>

上記のHTMLドキュメントのドキュメントオブジェクトモデルは次のとおりです。

ドキュメントオブジェクトモデル

カスケードスタイルシート（CSS）

HTMLはWebページに構造を提供しますが、CSSスタイルはWebページを見やすくします。 CSSは、HTMLまたはXML（SVGやXHTMLなどのXML方言を含む）で記述されたドキュメントのプレゼンテーションを記述するために使用される*スタイルシート言語*です。 CSSは、Webページで要素をレンダリングする方法を記述します。

スケーラブルベクターグラフィックス（SVG）

SVGは、Webページに画像をレンダリングする方法です。 SVGは直接的な画像ではなく、テキストを使用して画像を作成する方法にすぎません。 その名前が示すように、 Scalable Vector です。 ブラウザのサイズに応じて拡大縮小するため、ブラウザのサイズを変更しても画像が歪むことはありません。 IE 8以下を除くすべてのブラウザーがSVGをサポートしています。 データの視覚化は視覚的な表現であり、SVGを使用してD3.jsを使用して視覚化をレンダリングすると便利です。

SVGは、さまざまな形状をペイントできるキャンバスと考えてください。 そもそも、SVGタグを作成しましょう- 

<svg width = "500" height = "500"></<svg>

SVGのデフォルトの測定値はピクセルですので、ユニットがピクセルかどうかを指定する必要はありません。 今、私たちは長方形を描きたい場合は、以下のコードを使用してそれを描くことができます- 

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200"></rect>
</svg>

線、円、楕円、テキスト、パスなど、SVGで他の形状を描画できます。

HTML要素のスタイル設定と同様に、SVG要素のスタイル設定は簡単です。 長方形の背景色を黄色に設定しましょう。 そのためには、属性「fill」を追加し、以下に示すように値を黄色として指定する必要があります- 

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200" fill = "yellow"></rect>
</svg>

JavaScript

JavaScriptは、ユーザーのブラウザーで実行される緩やかに型指定されたクライアント側スクリプト言語です。 JavaScriptは、Webユーザーインターフェイスをインタラクティブにするために、HTML要素（DOM要素）と対話します。 JavaScriptは、ECMA-262仕様に基づくコア機能とECMAScript標準に基づかない他の機能を含む* ECMAScript標準*を実装します。 JavaScriptの知識はD3.jsの前提条件です。

D3.js-選択

選択は、D3.jsの中核概念の1つです。 CSSセレクターに基づいています。 Webページ内の1つ以上の要素を選択できます。 また、定義済みのデータセットとの関係で要素を変更、追加、または削除できます。 この章では、選択を使用してデータ視覚化を作成する方法を説明します。

D3.jsは、次の2つの方法を使用してHTMLページから要素を選択するのに役立ちます-

  • * select（）*-指定されたCSSセレクターに一致することにより、1つのDOM要素のみを選択します。 特定のCSSセレクターに複数の要素がある場合、最初の要素のみを選択します。
  • * selectAll（）*-指定されたCSSセレクターと一致することにより、すべてのDOM要素を選択します。 jQueryを使用した要素の選択に精通している場合、D3.jsセレクターはほぼ同じです。

それぞれの方法を詳しく見ていきましょう。

select（）メソッド

select（）メソッドは、CSSセレクターに基づいてHTML要素を選択します。 CSSセレクタでは、次の3つの方法でHTML要素を定義してアクセスすることができます-

  • HTML要素のタグ（例： div、h1、p、spanなど）
  • HTML要素のクラス名
  • HTML要素のID

例とともに実際に見てみましょう。

タグによる選択

TAGを使用してHTML要素を選択できます。 次の構文は、「div」タグ要素を選択するために使用されます。 

d3.select(“div”)

例-「select_by_tagl」ページを作成し、次の変更を追加します。 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div>
         Hello World!
      </div>

      <script>
         alert(d3.select("div").text());
      </script>
   </body>
</html>

ブラウザを介してウェブページを要求すると、画面に次の出力が表示されます-

クラス名による選択

CSSクラスを使用してスタイル設定されたHTML要素は、次の構文を使用して選択できます。 

d3.select(“.<class name>”)

ウェブページ「select_by_classl」を作成し、次の変更を追加します- 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>

      <script>
         alert(d3.select(".myclass").text());
      </script>
   </body>
</html>

ブラウザを介してウェブページを要求すると、画面に次の出力が表示されます-

IDによる選択

HTMLページのすべての要素には一意のIDが必要です。 この要素の一意のIDを使用して、以下に指定するselect（）メソッドを使用してアクセスできます。 

d3.select(“#<id of an element>”)

「select_by_idl」というWebページを作成し、次の変更を追加します。 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "hello">
         Hello World!
      </div>

      <script>
         alert(d3.select("#hello").text());
      </script>
   </body>
</html>

ブラウザを介してWebページを要求すると、画面に次の出力が表示されます。

DOM要素の追加

D3.jsを選択すると、既存のHTMLドキュメントに新しい要素を追加するための* append（）および text（）*メソッドが提供されます。 このセクションでは、DOM要素の追加について詳しく説明します。

append（）メソッド

append（）メソッドは、現在の選択範囲内の要素の最後の子として新しい要素を追加します。 このメソッドは、要素のスタイル、その属性、プロパティ、HTMLおよびテキストコンテンツを変更することもできます。

ウェブページ「select_and_appendl」を作成し、次の変更を追加します- 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>

      <script>
         d3.select("div.myclass").append("span");
      </script>
   </body>
</html>

ブラウザからウェブページをリクエストすると、画面に次の出力が表示されます。

ここで、append（）メソッドは、以下に示すようにdivタグ内に新しいタグスパンを追加します- 

<div class = "myclass">
   Hello World!<span></span>
</div>

text（）メソッド

text（）メソッドは、選択/追加された要素のコンテンツを設定するために使用されます。 上記の例を変更して、次に示すようにtext（）メソッドを追加しましょう。 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>

      <script>
         d3.select("div.myclass").append("span").text("from D3.js");
      </script>
   </body>
</html>

Webページを更新すると、次の応答が表示されます。

ここで、上記のスクリプトは連鎖操作を実行します。 D3.jsは* chain構文*と呼ばれる手法をスマートに採用しています。これは jQuery から認識できます。 メソッドをピリオドと連鎖させることにより、1行のコードで複数のアクションを実行できます。 速くて簡単です。 以下に示すように、同じスクリプトはチェーン構文なしでアクセスすることもできます。 

var body = d3.select("div.myclass");
var span = body.append("span");
span.text("from D3.js");

要素の変更

D3.jsには、選択した要素のコンテンツとスタイルを変更するためのさまざまなメソッド、* html（）、attr（）、および style（）*が用意されています。 この章で変更メソッドの使用方法を見てみましょう。

html（）メソッド

html（）メソッドは、選択/追加された要素のhtmlコンテンツを設定するために使用されます。

「select_and_add_htmll」というWebページを作成し、次のコードを追加します。 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>

      <script>
         d3.select(".myclass")l("Hello World! <span>from D3.js</span>");
      </script>
   </body>
</html>

ブラウザを介してWebページを要求すると、画面に次の出力が表示されます。

attr（）メソッド

attr（）メソッドは、選択した要素の属性を追加または更新するために使用されます。 「select_and_modifyl」というWebページを作成し、次のコードを追加します。 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>

      <script>
         d3.select(".myclass").attr("style", "color: red");
      </script>
   </body>
</html>

ブラウザを介してWebページを要求すると、画面に次の出力が表示されます。

style（）メソッド

style（）メソッドを使用して、選択した要素のスタイルプロパティを設定します。 「select_and_stylel」というWebページを作成し、次のコードを追加します。 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>

      <script>
         d3.select(".myclass").style("color", "red");
      </script>
   </body>
</html>

ブラウザを介してWebページを要求すると、画面に次の出力が表示されます。

classed（）メソッド

classed（）メソッドは、HTML要素の「クラス」属性を設定するためにのみ使用されます。 なぜなら、1つのHTML要素に複数のクラスを含めることができるからです。クラスをHTML要素に割り当てる際には注意が必要です。 このメソッドは、要素上の1つまたは複数のクラスを処理する方法を知っており、パフォーマンスが向上します。

  • Add class -クラスを追加するには、クラス化されたメソッドの2番目のパラメーターをtrueに設定する必要があります。 以下に定義されています-
d3.select(".myclass").classed("myanotherclass", true);
  • Remove class -クラスを削除するには、クラス化されたメソッドの2番目のパラメーターをfalseに設定する必要があります。 以下に定義されています-
d3.select(".myclass").classed("myanotherclass", false);
  • クラスの確認-クラスの存在を確認するには、2番目のパラメーターを省略して、クエリしているクラス名を渡します。 これは、存在する場合はtrue、存在しない場合はfalseを返します。
d3.select(".myclass").classed("myanotherclass");

選択内のいずれかの要素にクラスがある場合、これはtrueを返します。 単一要素の選択には d3.select を使用します。

  • クラスの切り替え-クラスを反対の状態に切り替えるには、既に存在する場合は削除し、まだ存在しない場合は追加します。次のいずれかを実行できます。 +単一の要素の場合、コードは次のようになります-
var element = d3.select(".myclass")
element.classed("myanotherclass", !oneBar.classed("myanotherclass"));

selectAll（）メソッド

selectAll（）メソッドは、HTMLドキュメント内の複数の要素を選択するために使用されます。 selectメソッドは最初の要素を選択しますが、selectAllメソッドは特定のセレクター文字列に一致するすべての要素を選択します。 選択がどれにも一致しない場合、空の選択を返します。 selectAll（）メソッドでも、すべての追加変更メソッド、* append（）、html（）、text（）、attr（）、style（）、classed（）、*などを連鎖させることができます。 この場合、メソッドは一致するすべての要素に影響します。 新しいウェブページ「select_multiplel」を作成して次のスクリプトを追加して理解しましょう- 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h2 class = "myclass">Message</h2>
      <div class = "myclass">
         Hello World!
      </div>

      <script>
         d3.selectAll(".myclass").attr("style", "color: red");
      </script>
   </body>
</html>

ブラウザを介してWebページを要求すると、画面に次の出力が表示されます。

ここでは、attr（）メソッドは div と* h2タグの両方に適用され、両方のタグのテキストの色は赤に変わります。

D3.js-データ結合

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

データ結合とは何ですか？

データ結合により、既存のHTMLドキュメント内のデータセットに基づいて、要素（HTML要素および埋め込みSVG要素）を挿入、変更、および削除できます。 デフォルトでは、データセット内の各データ項目はドキュメント内の要素（グラフィック）に対応しています。

データセットが変更されると、対応する要素も簡単に操作できます。 データ結合は、データとドキュメントのグラフィック要素との間に密接な関係を作成します。 データ結合により、データセットに基づく要素の操作が非常に簡単で簡単なプロセスになります。

データ結合の仕組み

データ結合の主な目的は、既存のドキュメントの要素を特定のデータセットにマップすることです。 指定されたデータセットに関してドキュメントの仮想表現を作成し、仮想表現を操作するメソッドを提供します。 以下に示すような単純なデータセットを考えてみましょう。 

[10, 20, 30, 25, 15]

データセットには5つの項目があるため、ドキュメントの5つの要素にマップできます。 セレクタのselectAll（）メソッドとデータ結合のdata（）メソッドを使用して、次のドキュメントの li 要素にマッピングします。

HTML

<ul id = "list">
   <li><li>
   <li></li>
</ul>

D3.jsコード

d3.select("#list").selectAll("li").data([10, 20, 30, 25, 15]);

現在、ドキュメントには5つの仮想要素があります。 最初の2つの仮想要素は、次に示すようにドキュメントで定義されている2つの li 要素です。 

1. li - 10
2. li - 20

以下に示すように、最初の2つの li に対して、* attr（）、style（）、text（）*などのすべてのセレクターの要素変更メソッドを使用できます。 

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return d; });

text（）メソッドの関数は、 li 要素のマッピングされたデータを取得するために使用されます。 ここで、 d は最初の li 要素の場合は10、2番目の li 要素の場合は20を表します。

次の3つの要素は任意の要素にマップでき、データ結合のenter（）およびセレクターのappend（）メソッドを使用して実行できます。 enter（）メソッドは、既存の要素にマッピングされていない残りのデータへのアクセスを提供し、append（）メソッドは、対応するデータから新しい要素を作成するために使用されます。 残りのデータ項目にも li を作成しましょう。 データマップは次のとおりです- 

3. li - 30
4. li - 25
5. li - 15

新しいli要素を作成するコードは次のとおりです- 

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return "This is pre-existing element and the value is " + d; })
   .enter()
   .append("li")
   .text(function(d)
      { return "This is dynamically created element and the value is " + d; });

データ結合は、以下に示すように、データセットから動的に削除されたデータ項目を処理する* exit（）メソッド*と呼ばれる別のメソッドを提供します。 

d3.selectAll("li")
   .data([10, 20, 30, 15])
   .exit()
   .remove()

ここでは、exit（）メソッドとremove（）メソッドを使用して、データセットとその対応するliから4番目のアイテムを削除しました。

完全なコードは次のとおりです- 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <ul id = "list">
         <li></li>
         <li></li>
      </ul>

      <input type = "button" name = "remove" value = "Remove fourth value"
         onclick = "javascript:remove()"/>

      <script>
         d3.select("#list").selectAll("li")
            .data([10, 20, 30, 25, 15])
            .text(function(d)
               { return "This is pre-existing element and the value is " + d; })
            .enter()
            .append("li")
            .text(function(d)
               { return "This is dynamically created element and the value is " + d; });

         function remove() {
            d3.selectAll("li")
            .data([10, 20, 30, 15])
            .exit()
            .remove()
         }
      </script>
   </body>
</html>

上記のコードの結果は次のようになります-

D3.js-SVGの概要

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

SVGの機能

SVGの顕著な特徴のいくつかは次のとおりです-

  • SVGはベクターベースの画像形式であり、テキストベースです。
  • SVGの構造はHTMLに似ています。
  • SVGは*ドキュメントオブジェクトモデル*として表すことができます。
  • SVGプロパティは属性として指定できます。
  • SVGには、原点（0、0）に対する絶対位置が必要です。
  • SVGは、そのままHTMLドキュメントに含めることができます。

最小限の例

最小限のSVG画像を作成して、HTMLドキュメントに含めましょう。

  • ステップ1 *-SVG画像を作成し、幅を300ピクセル、高さを300ピクセルに設定します。
<svg width = "300" height = "300">

</svg>

ここで、 svg タグはSVG画像を開始し、属性として幅と高さを持ちます。 SVG形式のデフォルトの単位は*ピクセル*です。

  • ステップ2 *-（100、100）で始まり（200、100）で終わる線を作成し、その線に赤い色を設定します。
<line x1 = "100" y1 = "100" x2 = "200" y2 = "200"
   style = "stroke:rgb(255,0,0);stroke-width:2"/>

ここで、 line タグは線を引き、その属性 x1、y1 は開始点を参照し、 x2、y2 は終了点を参照します。 スタイル属性は、 stroke および stroke-width スタイルを使用して線の色と太さを設定します。

  • x1 -これは最初の点のx座標です。
  • y1 -これは最初の点のy座標です。
  • x2 -これは、2番目のポイントのx座標です。
  • y2 -これは2番目の点のy座標です。
  • stroke -線の色。
  • stroke-width -線の太さ。
  • ステップ3 *-以下に示すように、HTMLドキュメント「svg_linel」を作成し、上記のSVGを統合します-
<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <div id = "svgcontainer">
         <svg width = "300" height = "300">
            <line x1 = "100" y1 = "100"
               x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0);
               stroke-width:2"/>
         </svg>
      </div>
      <p></p>
      <p></p>
   </body>
</html>

上記のプログラムは次の結果をもたらします。

D3.jsを使用したSVG

D3.jsを使用してSVGを作成するには、以下の手順に従います。

  • ステップ1 *-以下に示すように、SVGイメージを保持するコンテナを作成します。
<div id = "svgcontainer"></div>
  • ステップ2 *-select（）メソッドを使用してSVGコンテナを選択し、append（）メソッドを使用してSVG要素を挿入します。 attr（）およびstyle（）メソッドを使用して、属性とスタイルを追加します。
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
   .append("svg").attr("width", width).attr("height", height);

ステップ3 *-同様に、以下に示すように *svg 要素内に line 要素を追加します。 

svg.append("line")
   .attr("x1", 100)
   .attr("y1", 100)
   .attr("x2", 200)
   .attr("y2", 200)
   .style("stroke", "rgb(255,0,0)")
   .style("stroke-width", 2);

完全なコードは次のとおりです- 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <div id = "svgcontainer">
      </div>
      <script language = "javascript">
         var width = 300;
         var height = 300;
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         svg.append("line")
            .attr("x1", 100)
            .attr("y1", 100)
            .attr("x2", 200)
            .attr("y2", 200)
            .style("stroke", "rgb(255,0,0)")
            .style("stroke-width", 2);
      </script>
   </body>
</html>

上記のコードは次の結果をもたらします。

長方形要素

以下に示すように、長方形は <rect> タグで表されます。 

<rect x = "20" y = "20" width = "300" height = "300"></rect>

長方形の属性は次のとおりです-

  • x -これは、長方形の左上隅のx座標です。
  • y -これは、長方形の左上隅のy座標です。
  • 幅-これは長方形の幅を示します。
  • height -これは長方形の高さを示します。

SVGの単純な長方形は、以下で説明するように定義されます。 

<svg width = "300" height = "300">
   <rect x = "20" y = "20" width = "300" height = "300" fill = "green"></rect>
</svg>

以下に説明するように、同じ長方形を動的に作成できます。 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
        //Create SVG element
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
        //Create and append rectangle element
         svg.append("rect")
            .attr("x", 20)
            .attr("y", 20)
            .attr("width", 200)
            .attr("height", 100)
            .attr("fill", "green");
      </script>
   </body>
</html>

上記のコードは次の結果をもたらします。

サークル要素

以下で説明するように、円は <circle> タグで表されます。 

<circle cx = "200" cy = "50" r = "20"/>

円の属性は次のとおりです-

  • cx -これは円の中心のx座標です。
  • cy -これは円の中心のy座標です。
  • r -これは円の半径を示します。

SVGの単純な円を以下に説明します。 

<svg width = "300" height = "300">
   <circle cx = "200" cy = "50" r = "20" fill = "green"/>
</svg>

以下に説明するように、同じ円を動的に作成できます。 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
        //Create SVG element
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
        //Append circle
         svg.append("circle")
            .attr("cx", 200)
            .attr("cy", 50)
            .attr("r", 20)
            .attr("fill", "green");
      </script>
   </body>
</html>

上記のコードは次の結果をもたらします。

楕円要素

SVG Ellipse要素は、以下で説明するように <ellipse> タグで表されます。 

<ellipse cx = "200" cy = "50" rx = "100" ry = "50"/>

楕円の属性は次のとおりです-

  • cx -これは楕円の中心のx座標です。
  • cy -これは楕円の中心のy座標です。
  • rx -これは円のx半径です。
  • ry -これは円のy半径です。

SVGの単純な楕円について以下に説明します。 

<svg width = "300" height = "300">
   <ellipse cx = "200" cy = "50" rx = "100" ry = "50" fill = "green"/>
</svg>

以下のように同じ楕円を動的に作成できますが、 

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         svg.append("ellipse")
            .attr("cx", 200)
            .attr("cy", 50)
            .attr("rx", 100)
            .attr("ry", 50)
            .attr("fill", "green")
      </script>
   </body>
</html>

上記のコードは次の結果をもたらします。

D3.js-SVG変換

SVGは、単一のSVG形状要素またはSVG要素のグループを変換するオプションを提供します。 SVG変換は、 Translate、Scale、Rotate および Skew をサポートしています。 この章で変革を学びましょう。

SVG変換の概要

SVGは、変換をサポートする新しい属性 transform を導入します。 可能な値は次の1つ以上です。

  • Translate -2つのオプションがあります。 tx はx軸に沿った移動を指し、 ty はy軸に沿った移動を指します。 例-translate（30 30）の場合。
  • Rotate -3つのオプションが必要です。 angle は回転角度、 cx および cy はxおよびy軸の回転の中心を示します。 cx および cy が指定されていない場合、デフォルトで座標系の現在の原点になります。 例-rotate（60）の場合。
  • Scale -2つのオプションがあります。 sx はx軸に沿ったスケーリング係数を指し、 sy はy軸に沿ったスケーリング係数を指します。 ここで、 sy はオプションであり、指定されていない場合は sx の値を取ります。 例-scale（10）の場合。
  • * Sk​​ew（SkewXおよびSkewY）-単一のオプションが必要です。 *skew-angle は、SkewXの場合はx軸に沿った角度、SkewYの場合はy軸に沿った角度を指します。 例-skewx（20）の場合。

次のように説明されている翻訳付きのSVG長方形の例- 

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "300" height = "300">
         <rect x = "20"
            y = "20"
            width = "60"
            height = "60"
            fill = "green"
            transform = "translate(30 30)">
         </rect>
      </svg>
   </body>
</html>

上記のコードは次の結果をもたらします。

スペースを区切りとして使用して、単一のSVG要素に対して複数の変換を指定できます。 複数の値が指定されている場合、変換は指定された順序で1つずつ順番に適用されます。 

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "300" height = "300">
         <rect x = "20"
            y = "20"
            width = "60"
            height = "60"
            fill = "green"
            transform = "translate(60 60) rotate(45)">
         </rect>
      </svg>
   </body>
</html>

上記のコードは次の結果をもたらします。

変換は、SVGグループ要素にも適用できます。 これにより、以下で説明するように、SVGで定義された複雑なグラフィックを変換できます。 

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "300" height = "300">
         <g transform = "translate(60,60) rotate(30)">
            <rect x = "20"
               y = "20"
               width = "60"
               height = "30"
               fill = "green">
            </rect>
            <circle cx = "0"
               cy = "0"
               r = "30"
               fill = "red"/>
         </g>
      </svg>
   </body>
</html>

上記のコードは次の結果をもたらします。

最小限の例

SVG画像を作成するには、変換を使用してスケーリングおよび回転を試み、以下の手順に従います。

  • ステップ1 *-SVG画像を作成し、幅を300ピクセル、高さを300ピクセルに設定します。
<svg width = "300" height = "300">

</svg>
  • ステップ2 *-SVGグループを作成します。
<svg width = "300" height = "300">
   <g>
   </g>
</svg>
  • ステップ3 *-長さ60および高さ30の長方形を作成し、緑色で塗りつぶします。
<svg width = "300" height = "300">
   <g>
      <rect x = "20"
         y = "20"
         width = "60"
         height = "30"
         fill = "green">
      </rect>
   </g>
</svg>
  • ステップ4 *-半径30の円を作成し、赤色で塗りつぶします。
<svg width = "300" height = "300">
   <g>
      <rect x = "20"
         y = "20"
         width = "60"
         height = "30"
         fill = "green">
      </rect>
      <circle cx = "0"
         cy = "0"
         r = "30"
         fill = "red"/>
   </g>
</svg>
  • ステップ5 *-変換属性を追加し、以下に示すように変換と回転を追加します。
<svg width = "300" height = "300">
   <g transform = "translate(60,60) rotate(30)">
      <rect x = "20"
         y = "20"
         width = "60"
         height = "60"
         fill = "green">
      </rect>
      <circle cx = "0"
         cy = "0"
         r = "30"
         fill = "red"/>
   </g>
</svg>
  • ステップ6 *-HTMLドキュメント「svg_transform_rotate_groupl」を作成し、下記の説明に従って上記のSVGを統合します。
<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <div id = "svgcontainer">
         <svg width = "300" height = "300">
            <g transform = "translate(60,60) rotate(30)">
               <rect x = "20"
                  y = "20"
                  width = "60"
                  height = "60"
                  fill = "green">
               </rect>
               <circle cx = "0"
                  cy = "0"
                  r = "30"
                  fill = "red"/>
            </g>
         </svg>
      </div>
   </body>
</html>

上記のコードは次の結果をもたらします。

D3.jsを使用した変換

D3.jsを使用してSVGを作成するには、以下の手順に従います。

  • ステップ1 *-以下で説明するように、SVGイメージを保持するコンテナを作成します。
<div id = "svgcontainer"></div>
  • ステップ2 *-以下で説明するようにSVG画像を作成します。
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
   .append("svg")
   .attr("width", width)
   .attr("height", height);
  • ステップ3 *-SVGグループ要素を作成し、変換および回転属性を設定します。
var group = svg.append("g").attr("transform", "translate(60, 60) rotate(30)");
  • ステップ4 *-SVG長方形を作成し、グループ内に追加します。
var rect = group
   .append("rect")
   .attr("x", 20)
   .attr("y", 20)
   .attr("width", 60)
   .attr("height", 30)
   .attr("fill", "green")
  • ステップ5 *-SVGサークルを作成し、グループ内に追加します。
var circle = group
   .append("circle")
   .attr("cx", 0)
   .attr("cy", 0)
   .attr("r", 30)
   .attr("fill", "red")

完全なコードは次のとおりです- 

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>SVG rectangle</title>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <div id = "svgcontainer"></div>
         <script language = "javascript">
            var width = 300;
            var height = 300;
            var svg = d3.select("#svgcontainer")
               .append("svg")
               .attr("width", width)
               .attr("height", height);

            var group = svg.append("g")
               .attr("transform", "translate(60, 60) rotate(30)");

            var rect = group.append("rect")
               .attr("x", 20)
               .attr("y", 20)
               .attr("width", 60)
               .attr("height", 30)
               .attr("fill", "green")

            var circle = group
               .append("circle")
               .attr("cx", 0)
               .attr("cy", 0)
               .attr("r", 30)
               .attr("fill", "red")
         </script>
      </div>
   </body>
</html>

上記のコードは次の結果をもたらします。

変換ライブラリ

D3.jsは、手動で変換属性を作成せずに変換を管理するための個別のライブラリを提供します。 すべてのタイプの変換を処理するメソッドを提供します。 メソッドには、* transform（）、translate（）、scale（）、rotate（）などがあります。 次のスクリプトを使用して、Webページに *d3-transform を含めることができます。 

<script src = "http://d3js.org/d3.v4.min.js"></script>
<script src = "d3-transform.js"></script>

上記の例では、変換コードは次のように記述できます- 

var my_transform = d3Transform()
   .translate([60, 60])
   .rotate(30);

var group = svg
   .append("g")
   .attr("transform", my_transform);

D3.js-移行

遷移とは、アイテムのある状態から別の状態に変化するプロセスです。 D3.jsは、HTMLページでトランジションを実行する* transition（）*メソッドを提供します。 この章で移行について学びましょう。

transition（）メソッド

transition（）メソッドはすべてのセレクターで使用でき、移行プロセスを開始します。 このメソッドは、attr（）、style（）などのほとんどの選択メソッドをサポートします。 しかし、transition（）メソッドの前に呼び出す必要があるappend（）およびdata（）メソッドはサポートしていません。 また、duration（）、ease（）などの遷移に固有のメソッドを提供します。 単純な遷移は次のように定義できます- 

d3.select("body")
   .transition()
   .style("background-color", "lightblue");

遷移は、d3.transition（）メソッドを使用して直接作成し、次のようにセレクタとともに使用できます。 

var t = d3.transition()
   .duration(2000);
d3.select("body")
   .transition(t)
   .style("background-color", "lightblue");

最小限の例

遷移の仕組みを理解するための基本的な例を作成しましょう。

次のコードを使用して、新しいHTMLファイル transition_simplel を作成します。 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>Simple transitions</h3>
      <script>
         d3.select("body").transition().style("background-color", "lightblue");
      </script>
   </body>
</html>

ここでは、 body 要素を選択し、transition（）メソッドを呼び出して遷移を開始しました。 次に、現在の色*白*から*水色*に背景色を切り替えるように指示しました。

ブラウザを更新すると、画面の背景色が白から水色に変わります。 背景色をライトブルーからグレーに変更したい場合は、次の遷移を使用できます- 

d3.select("body").transition().style("background-color", "gray");

D3.js-アニメーション

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

例-「transition_colorl」ページで次のコードを考えてみましょう。 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>Simple transitions</h3>
      <script>
         d3.select("body").style("background-color", "lightblue")
        //make the background-color lightblue.transition()
         .style("background-color", "gray");
        //make the background-color gray
      </script>
   </body>
</html>

ここでは、ドキュメントの背景色が白から明るい灰色に変わり、その後灰色に変わりました。

duration（）メソッド

duration（）メソッドを使用すると、プロパティを瞬時にではなく、指定した期間にわたってスムーズに変更できます。 次のコードを使用して、5秒かかる移行を行いましょう。 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>Simple transitions</h3>
      <script>
         d3.selectAll("h3").transition().style("color","green").duration(5000);
      </script>
   </body>
</html>

ここでは、移行はスムーズかつ均等に行われました。 次の方法を使用して、RGBカラーコード値を直接割り当てることもできます。 

d3.selectAll("h3").transition().style("color","rgb(0,150,120)").duration(5000);

これで、各色番号がゆっくり、滑らかに、均等に0から150になります。 開始フレーム値から終了フレーム値までの中間フレームを正確にブレンドするために、D3.jsは内部補間メソッドを使用します。 構文は以下のとおりです- 

d3.interpolate(a, b)

D3はまた、次の補間タイプをサポートしています-

  • interpolateNumber -数値をサポートします。
  • interpolateRgb -色をサポートします。
  • interpolateString -サポート文字列。

D3.jsは適切な内挿法の使用を処理し、高度な場合、内挿法を直接使用して目的の結果を得ることができます。 必要に応じて、新しい内挿法を作成することもできます。

delay（）メソッド

delay（）メソッドを使用すると、一定の時間が経過した後に遷移を行うことができます。 「transition_delayl」内の次のコードを検討してください。 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> Simple transitions </h3>
      <script>
         d3.selectAll("h3").transition()
            .style("font-size","28px").delay(2000).duration(2000);
      </script>
   </body>
</html>

移行のライフサイクル

移行には4段階のライフサイクルがあります-

  • 移行が予定されています。
  • 移行が開始されます。
  • 移行が実行されます。 *移行は終了します。

これらのそれぞれを詳細に見ていきましょう。

移行が予定されています

遷移は、作成時にスケジュールされます。* selection.transition を呼び出すとき、遷移をスケジュールしています。 これは、 attr（）、style（）*、およびその他の遷移メソッドを呼び出して終了キーフレームを定義するときでもあります。

移行が始まります

移行は、移行のスケジュール時に指定された遅延に基づいて開始されます。 遅延が指定されていない場合、遷移はできるだけ早く開始されます。これは通常、数ミリ秒後です。

遷移に遅延がある場合、開始値は遷移の開始時にのみ設定する必要があります。 私たちは開始イベントを聞くことでこれを行うことができます- 

d3.select("body")
   .transition()
   .delay(200)
   .each("start", function() { d3.select(this).style("color", "green"); })
   .style("color", "red");

移行の実行

遷移が実行されると、0から1の範囲の遷移値で繰り返し呼び出されます。 遅延と期間に加えて、遷移はタイミングを制御するのが容易になります。 スローインやスローアウトなど、時間をゆがめると緩和されます。 イージング関数によっては、一時的にtの値が1より大きいか0より小さい場合があります。

移行終了

遷移の終了時間は常に正確に1であるため、終了値は遷移の終了時に正確に設定されます。 遷移は、遅延と継続時間の合計に基づいて終了します。 遷移が終了すると、終了イベントが送出されます。

D3.js-チャートの描画

D3.jsは、静的なSVGチャートを作成するために使用されます。 以下のチャートを描くのに役立ちます-

  • 棒グラフ
  • 円グラフ
  • 円グラフ
  • ドーナツチャート
  • 折れ線グラフ
  • バブルチャートなど

この章では、D3でのチャートの描画について説明します。 これらのそれぞれを詳細に理解しましょう。

棒グラフ

棒グラフは、最も一般的に使用されるグラフのタイプの1つであり、数、頻度、またはその他の尺度を表示および比較するために使用されます 平均）異なる個別のカテゴリまたはグループに対して。 このグラフは、さまざまなバーの高さまたは長さが、それらが表すカテゴリのサイズに比例するように構築されます。

x軸（水平軸）は、スケールのないさまざまなカテゴリを表します。 y軸（垂直軸）にはスケールがあり、これは測定単位を示します。 バーは、カテゴリの数とカテゴリの長さまたは複雑さに応じて、垂直または水平に描画できます。

棒グラフを描く

D3を使用してSVGで棒グラフを作成しましょう。 この例では、バーの* rect要素*と* text要素*を使用して、バーに対応するデータ値を表示できます。

D3を使用してSVGで棒グラフを作成するには、以下の手順に従います。

ステップ1 *- rect要素にスタイルを追加*-rect要素に次のスタイルを追加しましょう。 

svg rect {
   fill: gray;
}

ステップ2 *-*テキスト要素にスタイルを追加-次のCSSクラスを追加して、テキスト値にスタイルを適用します。 このスタイルをSVGテキスト要素に追加します。 以下に定義されています- 

svg text {
   fill: yellow;
   font: 12px sans-serif;
   text-anchor: end;
}

ここでは、塗りを使用して色を適用します。 テキストアンカーは、テキストをバーの右端に向けて配置するために使用されます。

ステップ3 *-*変数の定義-スクリプトに変数を追加しましょう。 以下で説明します。 

<script>
   var data = [10, 5, 12, 15];
   var width = 300,
      scaleFactor = 20,
      barHeight = 30;
</script>

ここに、

  • 幅-SVGの幅。
  • Scalefactor -画面に表示されるピクセル値にスケーリングされます。
  • Barheight -これは水平バーの静的な高さです。

ステップ4 *- SVG要素の追加*-次のコードを使用して、D3にSVG要素を追加します。 

var graph = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", barHeight * data.length);

ここでは、最初にドキュメント本文を選択し、新しいSVG要素を作成してから追加します。 このSVG要素内に棒グラフを作成します。 次に、SVGの幅と高さを設定します。 高さは、バーの高さ*データ値の数として計算されます。

バーの高さを30とし、データ配列の長さは4です。 次に、SVGの高さはbarheight * datalength（120ピクセル）として計算されます。

ステップ5 *-*変換の適用-次のコードを使用してbarに変換を適用します。 

var bar = graph.selectAll("g")
   .data(data)
   .enter()
   .append("g")
   .attr("transform", function(d, i) {
      return "translate(0," + i * barHeight + ")";
   });

ここでは、内側の各バーが要素に対応しています。 したがって、グループ要素を作成します。 横棒グラフを作成するには、各グループ要素を上下に配置する必要があります。 変換式のインデックス*バーの高さを考えてみましょう。

ステップ6 *-*長方形要素をバーに追加-前のステップでは、グループ要素を追加しました。 次のコードを使用して、長方形要素をバーに追加します。 

bar.append("rect")
   .attr("width", function(d) {
      return d * scaleFactor;
   })
   .attr("height", barHeight - 1);

ここで、幅は（データ値*スケール係数）、高さは（バーの高さ-マージン）です。

ステップ7 *-*データの表示-これは最後のステップです。 次のコードを使用して、各バーにデータを表示します。 

bar.append("text")
   .attr("x", function(d) { return (d*scaleFactor); })
   .attr("y", barHeight/2)
   .attr("dy", ".35em")
   .text(function(d) { return d; });

ここでは、幅は（データ値*スケールファクター）として定義されます。 テキスト要素はパディングまたはマージンをサポートしていません。 このため、「dy」オフセットを与える必要があります。 これは、テキストを垂直に配置するために使用されます。

ステップ8 *-*作業例-完全なコードリストを次のコードブロックに示します。 Webページ barchartsl を作成し、以下の変更を追加します。 

*barchartsl*
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         svg rect {
            fill: gray;
         }

         svg text {
            fill: yellow;
            font: 12px sans-serif;
            text-anchor: end;
         }
      </style>
   </head>

   <body>
      <script>
         var data = [10, 5, 12, 15];

         var width = 300
            scaleFactor = 20,
            barHeight = 30;

         var graph = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", barHeight *data.length);

         var bar = graph.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function(d, i) {
               return "translate(0," + i* barHeight + ")";
            });
         bar.append("rect").attr("width", function(d) {
            return d * scaleFactor;
         })

         .attr("height", barHeight - 1);

         bar.append("text")
            .attr("x", function(d) { return (d*scaleFactor); })
            .attr("y", barHeight/2)
            .attr("dy", ".35em")
            .text(function(d) { return d; });
      </script>
   </body>
</html>

ブラウザをリクエストすると、次のレスポンスが表示されます。

円グラフ

円グラフは、数値の割合を示すためにスライスに分割された円形の統計グラフィックです。

円グラフを描く

D3を使用してSVGで円グラフを作成しましょう。 これを行うには、次の手順に従う必要があります-

ステップ1 *-*変数の定義-スクリプトに変数を追加しましょう。 以下のコードブロックに示されています。 

<script>
   var width = 400;
   var height = 400;
   var data = [10, 20, 30];
   var colors = ['green', 'purple', 'yellow'];
</script>

ここに、

  • 幅-SVGの幅。
  • 高さ-SVGの高さ。
  • Data -データ要素の配列。
  • 色-円要素に色を適用します。

ステップ2 *- SVG要素の追加*-次のコードを使用して、D3にSVG要素を追加します。 

var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", height);

ステップ3 *-*変換の適用-次のコードを使用して、SVGで変換を適用します。 

var g = svg.selectAll("g")
   .data(data)
   .enter()
   .append("g")
   .attr("transform", function(d, i) {
      return "translate(0,0)";
   })

ここに、

  • var g = svg.selectAll（“ g”）*-円を保持するグループ要素を作成します。
  • .data（data）*-データ配列をグループ要素にバインドします。
  • .enter（）*-グループ要素のプレースホルダーを作成します。
  • .append（“ g”）*-グループ要素をページに追加します。
.attr("transform", function(d, i) {
   return "translate(0,0)";
})

ここで、translateは、原点に対して要素を配置するために使用されます。

ステップ4 *-*円要素を追加-次に、次のコードを使用してグループに円要素を追加します。 

g.append("circle")

次のコードを使用して、グループに属性を追加します。 

.attr("cx", function(d, i) {
   return i*75 + 50;
})

ここでは、各円の中心のx座標を使用します。 円のインデックスに75を掛け、円の間に50のパディングを追加しています。

次に、各円の中心のy座標を設定します。 これは、すべての円を均一にするために使用され、以下で定義されます。 

.attr("cy", function(d, i) {
   return 75;
})

次に、各円の半径を設定します。 以下で定義されています。 

.attr("r", function(d) {
   return d*1.5;
})

ここでは、半径にデータ値と定数「1.5」を掛けて、円のサイズを大きくしています。 最後に、次のコードを使用して各円の色を塗りつぶします。 

.attr("fill", function(d, i){
   return colors[i];
})

ステップ5 *-*データの表示-これは最後のステップです。 次のコードを使用して、各円にデータを表示しましょう。 

g.append("text")
   .attr("x", function(d, i) {
      return i * 75 + 25;
   })
   .attr("y", 80)
   .attr("stroke", "teal")
   .attr("font-size", "10px")
   .attr("font-family", "sans-serif")
   .text(function(d) {
      return d;
   });

ステップ6 *-*作業例-完全なコードリストを次のコードブロックに示します。 Webページ circlechartsl を作成し、次の変更を加えます。 

*circlechartsl*
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         var width = 400;

         var height = 400;

         var data = [10, 20, 30];

         var colors = ['green', 'purple', 'yellow'];

         var svg = d3
            .select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

         var g = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function(d, i) {
               return "translate(0,0)";
            })

         g.append("circle").attr("cx", function(d, i) {
            return i*75 + 50;
         })

         .attr("cy", function(d, i) {
            return 75;
         })

         .attr("r", function(d) {
            return d*1.5;
         })

         .attr("fill", function(d, i){
            return colors[i];
         })

         g.append("text").attr("x", function(d, i) {
            return i * 75 + 25;
         })

         .attr("y", 80)
         .attr("stroke", "teal")
         .attr("font-size", "10px")
         .attr("font-family", "sans-serif").text(function(d) {
            return d;
         });
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、以下がレスポンスになります。

円グラフ

円グラフは、円形の統計グラフです。 数値の割合を示すためにスライスに分割されます。 D3で円グラフを作成する方法を理解しましょう。

円グラフを描く

円グラフの描画を開始する前に、次の2つの方法を理解する必要があります-

  • d3.arc（）メソッドと
  • d3.pie（）メソッド。

これらの方法の両方を詳細に理解しましょう。

  • d3.arc（）メソッド*-d3.arc（）メソッドはアークを生成します。 円弧の内側半径と外側半径を設定する必要があります。 内側の半径が0の場合、結果は円グラフになります。それ以外の場合、結果はドーナツグラフになります。これについては次のセクションで説明します。

    *The d3.pie（）Method* -d3.pie（）メソッドは、円グラフを生成するために使用されます。 データセットからデータを取得し、円グラフの各区分の開始角度と終了角度を計算します。

次の手順を使用して、円グラフを描きましょう。

ステップ1 *-*スタイルの適用-アーク要素に次のスタイルを適用します。 

.arc text {
   font: 12px arial;
   text-anchor: middle;
}

.arc path {
   stroke: #fff;
}

.title {
   fill: green;
   font-weight: italic;
}

ここでは、塗りを使用して色を適用します。 テキストアンカーは、テキストを円弧の中心に向けて配置するために使用されます。

ステップ2 *-*変数の定義-以下に示すように、スクリプトで変数を定義します。 

<script>
   var svg = d3.select("svg"),
      width = svg.attr("width"),
      height = svg.attr("height"),
      radius = Math.min(width, height)/2;
</script>

ここに、

  • 幅-SVGの幅。
  • 高さ-SVGの高さ。
  • 半径-Math.min（width、height）/2;の関数を使用して計算できます。

ステップ3 *-*変換の適用-次のコードを使用して、SVGで次の変換を適用します。 

var g = svg.append("g")
   .attr("transform", "translate(" + width/2 + "," + height/2 + ")");

次に、以下に示す d3.scaleOrdinal 関数を使用して色を追加します。 

var color = d3.scaleOrdinal(['gray', 'green', 'brown', 'orange']);

ステップ4 *-*円グラフの生成-次に、以下の関数を使用して円グラフを生成します。 

var pie = d3.pie()
   .value(function(d) { return d.percent; });

ここで、パーセンテージ値をプロットできます。 d.percent を返し、それを円の値として設定するには、匿名関数が必要です。

ステップ5 *-*パイウェッジの弧を定義-パイチャートを生成した後、以下に示す関数を使用して各パイウェッジの弧を定義します。 

var arc = d3.arc()
   .outerRadius(radius)
   .innerRadius(0);

ここでは、この弧はパス要素に設定されます。 計算された半径はouterradiusに設定され、innerradiusは0に設定されます。

ステップ6 *-*ウェッジにラベルを追加-半径を指定して、パイウェッジにラベルを追加します。 次のように定義されています。 

var label = d3
   .arc()
   .outerRadius(radius)
   .innerRadius(radius - 80);

ステップ7 *-*データの読み取り-これは重要なステップです。 以下の関数を使用してデータを読み取ることができます。 

d3.csv("populations.csv", function(error, data) {
   if (error) {
      throw error;
   }
});

ここでは、 populations.csv にデータファイルが含まれています。 d3.csv 関数は、データセットからデータを読み取ります。 データが存在しない場合、エラーがスローされます。 このファイルをD3パスに含めることができます。

ステップ8 *-*データのロード-次のステップは、次のコードを使用してデータをロードすることです。 

var arc = g.selectAll(".arc")
   .data(pie(data))
   .enter()
   .append("g")
   .attr("class", "arc");

ここで、データセットの各データ値のグループ要素にデータを割り当てることができます。

ステップ9 *-*パスの追加-次に、パスを追加し、以下に示すようにグループ「arc」をグループに割り当てます。 

arcs.append("path")
   .attr("d", arc)
   .attr("fill", function(d) { return color(d.data.states); });

ここでは、塗りつぶしを使用してデータの色を適用します。 d3.scaleOrdinal 関数から取得されます。

ステップ10 *-*テキストの追加-次のコードを使用してラベルにテキストを表示します。 

arc.append("text")
   .attr("transform", function(d) {
      return "translate(" + label.centroid(d) + ")";
   })
.text(function(d) { return d.data.states; });

ここでは、ラベルにテキストを表示するためにSVGテキスト要素が使用されます。 以前に* d3.arc（）を使用して作成したラベル円弧は、ラベルの位置である重心点を返します。 最後に、 *d.data.browser を使用してデータを提供します。

ステップ11 *-*グループ要素の追加-グループ要素の属性を追加し、クラスタイトルを追加してテキストを色付けし、イタリックにします。これはステップ1で指定し、以下で定義します。 

svg.append("g")
   .attr("transform", "translate(" + (width/2 - 120) + "," + 20 + ")")
   .append("text")
   .text("Top population states in india")
   .attr("class", "title")

ステップ12 *-*作業例-円グラフを描くために、インドの人口のデータセットを取得できます。 このデータセットは、次のように定義されているダミーWebサイトの人口を示しています。 

*population.csv*
states,percent
UP,80.00
Maharastra,70.00
Bihar,65.0
MP,60.00
Gujarat,50.0
WB,49.0
TN,35.0

上記のデータセットの円グラフの視覚化を作成しましょう。 ウェブページ「piechartl」を作成し、それに次のコードを追加します。 

<!DOCTYPE html>
<html>
   <head>
      <style>
         .arc text {
            font: 12px arial;
            text-anchor: middle;
         }

         .arc path {
            stroke: #fff;
         }

        .title {
            fill: green;
            font-weight: italic;
         }
      </style>

      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "400" height = "400"></svg>
      <script>
         var svg = d3.select("svg"),
            width = svg.attr("width"),
            height = svg.attr("height"),
            radius = Math.min(width, height)/2;

         var g = svg.append("g")
            .attr("transform", "translate(" + width/2 + "," + height/2 + ")");

         var color = d3.scaleOrdinal([
            'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple'
         ]);

         var pie = d3.pie().value(function(d) {
            return d.percent;
         });

         var path = d3.arc()
            .outerRadius(radius - 10).innerRadius(0);

         var label = d3.arc()
            .outerRadius(radius).innerRadius(radius - 80);

         d3.csv("populations.csv", function(error, data) {
            if (error) {
               throw error;
            }

            var arc = g.selectAll(".arc")
               .data(pie(data))
               .enter()
               .append("g")
               .attr("class", "arc");

            arc.append("path")
               .attr("d", path)
               .attr("fill", function(d) { return color(d.data.states); });

            console.log(arc)

            arc.append("text").attr("transform", function(d) {
               return "translate(" + label.centroid(d) + ")";
            })

            .text(function(d) { return d.data.states; });
         });

         svg.append("g")
            .attr("transform", "translate(" + (width/2 - 120) + "," + 20 + ")")
            .append("text").text("Top population states in india")
            .attr("class", "title")
      </script>
   </body>
</html>

D3.js-グラフ

グラフは、長方形として表される2次元のフラットスペースです。 グラフには、x = 0およびy = 0の座標が左下にある座標空間があります。 数学的なデカルト座標空間によれば、グラフの左から右に伸びるX座標と、下から上に伸びるY座標があります。

x = 30およびy = 30の座標で円を描くことについて話すときは、左下から右に30単位移動してから、30単位上に移動します。

SVG座標空間

SVG座標空間は、2つの重要な機能を除いて、数学的なグラフ座標空間が機能するのと同じ方法で機能します-

  • SVG座標空間のx = 0およびy = 0座標は左上にあります。
  • SVG座標空間では、Y座標が上から下に向かって成長します。

SVG座標空間グラフ

SVG座標空間でx = 30およびy = 30の座標で円を描くことについて話すとき、左上から右に30単位移動してから、30単位上に移動します。 次のように定義されています。 

var svgContainer = d3
   .select("body")
   .append("svg")
   .attr("width", 200)
   .attr("height", 200);

SVG要素を幅200単位、高さ200単位のグラフとして考えてください。 XとYのゼロ座標が左上にあることがわかりました。 また、Y座標が大きくなると、グラフの上部から下部に移動することもわかりました。 以下に示すように、SVG要素のスタイルを設定できます。 

var svgContainer = d3
   .select("body").append("svg")
   .attr("width", 200)
   .attr("height", 200)
   .style("border", "1px solid black");

グラフの例

折れ線グラフの例を考えてみましょう。

折れ線グラフ-折れ線グラフは、時間の経過とともに何かの価値を視覚化するために使用されます。 2つの変数を比較します。 各変数は軸に沿ってプロットされます。 折れ線グラフには、垂直軸と水平軸があります。

このグラフ例では、2006年から2017年までのインドの州の人口増加としてcsvファイルレコードを取得できます。 まず、人口記録を表示するために data.csv を作成しましょう。

D3フォルダに新しいcsvファイルを作成します- 

year,population
2006,40
2008,45
2010,48
2012,51
2014,53
2016,57
2017,62

ここで、ファイルを保存し、次の手順を実行してD3に折れ線グラフを描画します。 各ステップを詳しく見ていきましょう。

ステップ1 *-*スタイルの追加-以下に示すコードを使用して、 line クラスにスタイルを追加します。 

.line {
   fill: none;
   stroke: green;
   stroke-width: 5px;
}

ステップ2 *-*変数の定義-SVG属性を以下に定義します。 

var margin = {top: 20, right: 20, bottom: 30, left: 50},
   width = 960 - margin.left - margin.right,
   height = 500 - margin.top - margin.bottom;

ここで、最初の行は、グラフが配置されるブロックを囲む4つのマージンを定義します。

ステップ3 *-*ラインの定義-以下に示す* d3.line（）*関数を使用して新しいラインを描画します。 

var valueline = d3.line()
   .x(function(d) { return x(d.year); })
   .y(function(d) { return y(d.population); });

ここで、YearはX軸レコードのデータを表し、母集団はY軸のデータを指します。

ステップ4 *- SVG属性の追加*-以下のコードを使用して、SVG属性とグループ要素を追加します。 

var svg = d3.select("body").append("svg")
   .attr("width", width + margin.left + margin.right)
   .attr("height", height + margin.top + margin.bottom)
   .append("g").attr("transform",
      "translate(" + margin.left + "," + margin.top + ")");

ここでは、グループ要素を追加し、変換を適用しました。

ステップ5 *-*データの読み取り-これで、データセット data.csv からデータを読み取ることができます。 

d3.csv("data.csv", function(error, data) {
   if (error) throw error;
}

ここでは、data.csvは存在せず、エラーをスローします。

ステップ6 *-*データのフォーマット-次に、以下のコードを使用してデータをフォーマットします。 

data.forEach(function(d) {
   d.year = d.year;
   d.population = +d.population;
});

上記のコードにより、csvファイルから取り出されるすべての値が正しく設定およびフォーマットされます。 各行は2つの値で構成されます。1つは「年」、もう1つは「人口」です。 この関数は、「年」と「人口」の値を一度に1行ずつ引き出します。

ステップ7 *-*スケール範囲の設定-データをフォーマットした後、XおよびYのスケール範囲を設定できます。 

x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);

ステップ8 *-*パスの追加-以下に示すように、パスとデータを追加します。 

svg.append("path").data([data])
   .attr("class", "line").attr("d", valueline);

ステップ9 *- X軸の追加*-これで、以下のコードを使用してX軸を追加できます。 

svg.append("g")
   .attr("transform", "translate(0," + height + ")")
   .call(d3.axisBottom(x));

ステップ10 *- Y軸の追加*-以下に示すように、グループにY軸を追加できます。 

svg.append("g")
   .call(d3.axisLeft(y));

ステップ11 *-*作業例-完全なコードは、次のコードブロックに記載されています。 簡単なWebページ linegraphsl を作成し、次の変更を加えます。 

*graphl*
<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         .line {
            fill: none;
            stroke: green;
            stroke-width: 5px;
         }
      </style>
   </head>

   <body>
      <script>
        //set the dimensions and margins of the graph
         var margin = {top: 20, right: 20, bottom: 30, left: 50},
         width = 960 - margin.left - margin.right,
         height = 500 - margin.top - margin.bottom;

        //set the ranges
         var x = d3.scaleTime().range([0, width]);
         var y = d3.scaleLinear().range([height, 0]);

        //define the line
         var valueline = d3.line()
            .x(function(d) { return x(d.year); })
            .y(function(d) { return y(d.population); });

        //append the svg obgect to the body of the page
        //appends a 'group' element to 'svg'
        //moves the 'group' element to the top left margin
         var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g").attr("transform",
               "translate(" + margin.left + "," + margin.top + ")");

        //Get the data
         d3.csv("data.csv", function(error, data) {
            if (error) throw error;
           //format the data
            data.forEach(function(d) {
               d.year = d.year;
               d.population = +d.population;
            });

           //Scale the range of the data
            x.domain(d3.extent(data, function(d) { return d.year; }));
            y.domain([0, d3.max(data, function(d) { return d.population; })]);

           //Add the valueline path.
            svg.append("path")
               .data([data])
               .attr("class", "line")
               .attr("d", valueline);

           //Add the X Axis
            svg.append("g")
               .attr("transform", "translate(0," + height + ")")
               .call(d3.axisBottom(x));

           //Add the Y Axis
            svg.append("g")
               .call(d3.axisLeft(y));
         });
      </script>
   </body>
</html>

ブラウザをリクエストすると、次の結果が表示されます。

グラフ

D3.js-地理

地理空間座標は、天気や人口のデータによく使用されます。 D3.jsは、地理データ用の3つのツールを提供します-

  • パス-最終ピクセルを生成します。
  • 投影-球座標をデカルト座標に変換し、
  • ストリーム-彼らは物事をスピードアップします。

D3.jsの地理が何であるかを学ぶ前に、次の2つの用語を理解する必要があります-

  • D3 Geo Pathおよび
  • プロジェクション

これら2つの用語について詳しく説明します。

D3 Geo Path

それは地理的経路ジェネレーターです。 GeoJSONはSVGパスデータ文字列を生成するか、Canvasへのパスをレンダリングします。 パフォーマンスを向上させるために、動的またはインタラクティブな投影にはCanvasをお勧めします。 D3 Geo Path Data Generatorを生成するには、次の関数を呼び出すことができます。 

d3.geo.path()

ここで、* d3.geo.path（）*パスジェネレーター関数を使用すると、Geo CoordinatesからCartesian Coordinatesへの変換に使用するマップ投影を選択できます。

たとえば、インドの地図の詳細を表示する場合、以下に示すようにパスを定義できます。 

var path = d3.geo.path()
svg.append("path")
   .attr("d", path(states))

プロジェクション

投影は、球面ポリゴンジオメトリを平面ポリゴンジオメトリに変換します。 D3は、次の投影実装を提供します。

  • 方位角-方位角投影は、球を平面に直接投影します。
  • コンポジット-コンポジットは、単一のディスプレイに構成される複数の投影で構成されます。
  • Conic -球体を円錐に投影し、円錐を平面に展開します。
  • Cylindrical -円柱投影は、球体を含む円柱に投影し、円柱を平面に展開します。

新しい投影を作成するには、次の関数を使用できます。 

d3.geoProjection(project)

指定された生の投影プロジェクトから新しい投影を作成します。 プロジェクト関数は、指定されたポイントの経度と緯度をラジアンで取得します。 コードに次の投影法を適用できます。 

var width = 400
var height = 400
var projection = d3.geo.orthographic()
var projections = d3.geo.equirectangular()
var project = d3.geo.gnomonic()
var p = d3.geo.mercator()
var pro = d3.geo.transverseMercator()
   .scale(100)
   .rotate([100,0,0])
   .translate([width/2, height/2])
   .clipAngle(45);

ここでは、上記の投影法のいずれかを適用できます。 これらの各予測について簡単に説明しましょう。

  • * d3.geo.orthographic（）*-正投影は、単一の半球を表示するのに適した方位投影です。視点は無限遠です。
  • * d3.geo.gnomonic（）*-ノモニック投影法は、大円を直線として投影する方位角投影法です。
  • * d3.geo.equirectangular（）*-正距円筒法は、可能な限り単純な地理的投影法です。 アイデンティティ関数。 等面積でも共形でもありませんが、ラスタデータに使用される場合があります。
  • * d3.geo.mercator（）*-球状メルカトル図法は、タイルマッピングライブラリで一般的に使用されます。
  • * d3.geo.transverseMercator（）*-横メルカトル図法。

実施例

この例では、インドの地図を作成しましょう。 これを行うには、次の手順に従う必要があります。

ステップ1 *-*スタイルを適用-以下のコードを使用して、マップにスタイルを追加しましょう。 

<style>
   path {
      stroke: white;
      stroke-width: 0.5px;
      fill: grey;
   }

   .stateTN { fill: red; }
   .stateAP { fill: blue; }
   .stateMP{ fill: green; }
</style>

ここでは、状態TN、AP、およびMPに特定の色を適用しました。

ステップ2 *- topojsonスクリプトを含める*-TopoJSONは、以下で定義するトポロジをエンコードするGeoJSONの拡張です。 

<script src = "http://d3js.org/topojson.v0.min.js"></script>

このスクリプトをコーディングに含めることができます。

ステップ3 *-*変数の定義-以下のコードを使用して、スクリプトに変数を追加します。 

var width = 600;
var height = 400;
var projection = d3.geo.mercator()
   .center([78, 22])
   .scale(680)
   .translate([width/2, height/2]);

ここでは、SVGの幅は600、高さは400です。 画面は2次元の空間であり、3次元のオブジェクトを表示しようとしています。 したがって、* d3.geo.mercator（）*関数を使用して、土地のサイズ/形状をひどく歪めることができます。

中心は[78、22]で指定されます。これにより、経度と緯度の2要素配列（度単位）として指定された位置に投影の中心が設定され、投影が返されます。

ここでは、地図は西78度と北22度を中心にしています。

スケールは680として指定されます。これにより、投影のスケール係数が指定された値に設定されます。 スケールが指定されていない場合、現在のスケール係数が返されます。デフォルトは150です。 スケール係数は予測全体で一貫していないことに注意することが重要です。

ステップ4 *- SVGの追加*-次に、SVG属性を追加します。 

var svg = d3.select("body").append("svg")
   .attr("width", width)
   .attr("height", height);

ステップ5 *-*パスの作成-コードの次の部分は、新しい地理的パスジェネレーターを作成します。 

var path = d3.geo.path()
   .projection(projection);

ここでは、パスジェネレーター（d3.geo.path（））を使用して投影変数タイプ（.projection）を指定します。これは、以前に可変投影法を使用したメルカトル図法として定義されていました。

ステップ6 *-*データの生成-indiatopo.json –このファイルには非常に多くのレコードが含まれており、次の添付ファイルから簡単にダウンロードできます。

  • indiatopo.jsonファイルをダウンロード*

ファイルをダウンロードしたら、D3の場所を追加できます。 サンプル形式を以下に示します。 

{"type":"Topology","transform":{"scale":[0.002923182318231823,0.0027427542754275428],
"translate":[68.1862,8.0765]},"objects":
{"states":{"type":"GeometryCollection",
"geometries":[{"type":"MultiPolygon","id":"AP","arcs":
[[properties":{"name":"Andhra Pradesh"}},{"type":"MultiPolygon",
"id":"AR","arcs":[[properties":{"name":"Arunachal Pradesh"}},{"type":"MultiPolygon",
"id":"AS","arcs":[[Step 7 *−* Draw map *− Now, read the data from the* indiatopo.json *file and draw the map.

[source,prettyprint,notranslate]

d3.json（ "indiatopo.json"、function（error、topology）{g.selectAll（ "path"）.data（topojson.object（topology、topology.objects.states）.geometries）.enter（）.append（ "path"）.attr（ "class"、function（d）{return "state" + d.id;}）.attr（ "d"、path）}）; 

Here, we will load the TopoJSON file with the coordinates for the India map (indiatopo.json). Then we declare that we are going to act on all the path elements in the graphic. It is defined as, g.selectAll(“path”). We will then pull the data that defines the countries from the TopoJSON file.

[source,prettyprint,notranslate]

geometries）. 

Finally, we will add it to the data that we are going to display using the* .enter() *method and then we append that data as path elements using the* .append(“path”)* method.

D3.js-配列API

D3にはモジュールのコレクションが含まれています。 各モジュールを個別に使用することも、モジュールのコレクションを一緒に使用して操作を実行することもできます。 この章では、Array APIについて詳しく説明します。

配列とは何ですか？

配列には、同じタイプの要素の固定サイズの順次コレクションが含まれます。 配列はデータのコレクションを格納するために使用されますが、配列を同じタイプの変数のコレクションと考える方が便利な場合がよくあります。

APIの構成

以下のスクリプトを使用して、APIを簡単に構成できます。 

<script src = "https://d3js.org/d3-array.v1.min.js"></script>
<body>
   <script>
   </script>
</body>

配列統計APIメソッド

以下は、最も重要な配列統計APIメソッドの一部です。

  • d3.min（配列）
  • d3.max（配列）
  • d3.extent（配列）
  • d3.sum（配列）
  • d3.mean（配列）
  • d3.quantile（配列）
  • d3.variance（配列）
  • d3.deviation（配列）

これらのそれぞれについて詳しく説明します。

d3.min（配列）

自然順序を使用して、指定された配列の最小値を返します。

例-次のスクリプトを検討してください。 

<script>
   var data = [20,40,60,80,100];
   console.log(d3.min(data));
</script>

結果-上記のスクリプトは、コンソールの配列20の最小値を返します。

d3.max（配列）

指定された配列の最大値を返します。

例-次のスクリプトを検討してください。 

<script>
   var data = [20,40,60,80,100];
   console.log(d3.max(data));
</script>

結果-上記のスクリプトは、コンソールの配列（100）の最大値を返します。

d3.extent（配列）

指定された配列の最小値と最大値を返します。

例-次のスクリプトを検討してください。 

<script>
   var data = [20,40,60,80,100];
   console.log(d3.extent(data));
</script>

結果-上記のスクリプトはエクステント値[20,100]を返します。

d3.sum（配列）

指定された数値の配列の合計を返します。 配列が空の場合、0を返します。

例-以下を考慮してください。 

<script>
   var data = [20,40,60,80,100];
   console.log(d3.sum(data));
</script>

結果-上記のスクリプトは合計値300を返します。

d3.mean（配列）

指定された数値の配列の平均を返します。

例-以下を考慮してください。 

<script>
   var data = [20,40,60,80,100];
   console.log(d3.mean(data));
</script>

結果-上記のスクリプトは平均値を60として返します。 同様に、中央値を確認できます。

d3.quantile（配列）

指定された並べ替えられた数値配列のp分位数を返します。pは範囲[0、1]の数値です。 たとえば、中央値は、p = 0.5、p = 0.25での最初の四分位数、p = 0.75での3番目の四分位数を使用して計算できます。 この実装では、R-7メソッド、デフォルトのRプログラミング言語、およびExcelを使用します。

例-次の例を考えてください。 

var data = [20, 40, 60, 80, 100];
d3.quantile(data, 0);//output is 20
d3.quantile(data, 0.5);//output is 60
d3.quantile(data, 1);//output is 100

同様に、他の値を確認できます。

d3.variance（配列）

指定された数値の配列の分散を返します。

例-次のスクリプトを検討してください。 

<script>
   var data = [20,40,60,80,100];
   console.log(d3.variance(data));
</script>

結果-上記のスクリプトは分散値を1000として返します。

d3.deviation（配列）

指定された配列の標準偏差を返します。 配列の値が2つ未満の場合、未定義として返されます。

例-以下を考慮してください。 

<script>
   var data = [20,40,60,80,100];
   console.log(d3.deviation(data));
</script>

結果-上記のスクリプトは偏差値を31.622776601683793として返します。

例-上記のすべてのArray APIメソッドを、次のスクリプトを使用して実行します。 Webページの「配列」を作成し、それに次の変更を追加します。 

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 array API</h3>
      <script>
         var data = [20,40,60,80,100];
         console.log(d3.min(data));
         console.log(d3.max(data));
         console.log(d3.extent(data));
         console.log(d3.sum(data));
         console.log(d3.mean(data));
         console.log(d3.quantile(data,0.5));
         console.log(d3.variance(data));
         console.log(d3.deviation(data));
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

配列

配列検索APIメソッド

以下は、いくつかの重要な配列検索APIメソッドです。

  • d3.scan（配列）
  • d3.ascending（a、b）

これらの両方を詳細に理解しましょう。

d3.scan（配列）

このメソッドは、指定された配列の線形スキャンを実行するために使用されます。 指定したコンパレータに最小要素のインデックスを返します。 簡単な例を以下に定義します。

例- 

var array = [{one: 1}, {one: 10}];
console.log(d3.scan(array, function(a, b) { return a.one - b.one; }));//output is 0
console.log(d3.scan(array, function(a, b) { return b.one - a.one; }));//output is 1

d3.ascending（a、b）

このメソッドは、コンパレータ機能を実行するために使用されます。 次のように実装できます- 

function ascending(a, b) {
   return a < b ? -1 : a > b ? 1 : a > =  b ? 0 : NaN;
}

組み込みソート方法にコンパレータ関数が指定されていない場合、デフォルトの順序はアルファベット順です。 上記の関数は、aがbより小さい場合は-1、aがbより大きい場合は1、0を返します。

同様に、descending（a、b）メソッドを実行できます。 aがbより大きい場合は-1、aがbより小さい場合は1、または0を返します。 この関数は、逆自然順序を実行します。

例-

Webページ array_search を作成し、次の変更を加えます。 

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 array API</h3>
      <script>
         var array = [{one: 1}, {one: 10}];
         console.log(d3.scan(array, function(a, b) { return a.one - b.one; }));//0
         console.log(d3.scan(array, function(a, b) { return b.one - a.one; }));//1
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次の結果が表示されます。

配列変換API

以下は、最も顕著な配列変換APIメソッドの一部です。

  • d3.cross（a、b [、reducer]）
  • d3.merge（arrays）
  • d3.pairs（array [、reducer]）
  • d3.permute（配列、インデックス）
  • d3.zip（配列）

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

d3.cross（a、b [、reducer]）

このメソッドは、指定された2つの配列aとbのデカルト積を返すために使用されます。 簡単な例を以下に定義します。 

d3.cross([10, 20], ["a", "b"]);//output is [[a"], [10, "b"], [20, "a"], [20, "b"]]

d3.merge（arrays）

このメソッドは配列をマージするために使用され、以下で定義されます。 

d3.merge([[output is [10, 20]

d3.pairs（array [、reducer]）

このメソッドは配列要素のペアリングに使用され、以下で定義されます。 

d3.pairs([10, 20, 30, 40]);//output is [[d3.permute(array, indexes)

This method is used to perform the permutation from specified array and indexes. You can also perform the values from an object into an array. It is explained below.

[source,prettyprint,notranslate]

var object = {fruit： "mango"、color： "yellow"}、fields = ["fruit"、 "color"]; d3.permute（object、fields）;//出力は「mango」「yellow」です 

==== d3.zip(arrays)

This method is used to return an array of arrays. If arrays contain only a single array, the returned array contains one-element arrays. If no argument is specified, then the returned array is empty. It is defined below.

[source,prettyprint,notranslate]

d3.zip（[10、20]、[30、40]）;//出力は[[例*-Webページ array_transform を作成し、次の変更を追加します。 

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 array API</h3>
      <script>
         console.log(d3.cross([10, 20], ["a", "b"]));
         console.log(d3.merge([[console.log(d3.pairs([10, 20, 30, 40]));
         var object = {fruit:"mango", color: "yellow"},
         fields = ["fruit", "color"];
         console.log(d3.permute(object, fields));
         console.log(d3.zip([10, 20], [30, 40]));
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

配列変換

D3.js-コレクションAPI

コレクションは、複数の要素を単一のユニットにグループ化する単なるオブジェクトです。 コンテナとも呼ばれます。 この章では、コレクションAPIについて詳しく説明します。

APIの構成

次のスクリプトを使用してAPIを構成できます。 

<script src = "https://d3js.org/d3-collection.v1.min.js"></script>
<script>

</script>

コレクションAPIメソッド

コレクションAPIには、オブジェクト、マップ、セット、およびネストが含まれています。 以下は、最も一般的に使用されるコレクションAPIメソッドです。

  • オブジェクトAPI
  • Maps API
  • APIを設定します
  • Nests API

これらの各APIについて詳しく説明します。

オブジェクトAPI

オブジェクトAPIは重要なデータ型の1つです。 それは次の方法をサポートしています-

  • * d3.keys（object）*-このメソッドにはオブジェクトプロパティキーが含まれ、プロパティ名の配列を返します。
  • * d3.values（object）*-このメソッドはオブジェクト値を含み、プロパティ値の配列を返します。
  • * d3.entries（object）*-このメソッドは、指定されたオブジェクトのキーと値の両方を含む配列を返すために使用されます。 各エントリは、キーと値を持つオブジェクトです。

例-次のコードを考えてみましょう。 

d3.entries({one: 1})

ここで、キーは1、値は1です。

例-Webページ objectsl を作成し、以下の変更を追加します。 

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 collection API</h3>
      <script>
         var month = {"jan": 1, "Feb": 2, "mar": 3, "apr": 4};
         console.log(d3.keys(month));
         console.log(d3.values(month));
         console.log(d3.entries(month));
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次の応答が表示されます。

コレクションAPI

Maps API

マップには、キーと値のペアに基づいた値が含まれます。 各キーと値のペアはエントリと呼ばれます。 マップには一意のキーのみが含まれます。 キーに基づいて要素を検索、更新、または削除すると便利です。 さまざまなMaps APIメソッドを詳しく見ていきましょう。

  • * d3.map（[object [、key]]）*-このメソッドは、新しいマップを作成するために使用されます。 オブジェクトは、列挙可能なすべてのプロパティをコピーするために使用されます。
  • * map.has（key）*-このメソッドは、マップに指定されたキー文字列のエントリがあるかどうかを確認するために使用されます。
  • * map.get（key）*-このメソッドは、指定されたキー文字列の値を返すために使用されます。
  • * map.set（key、value）*-このメソッドは、指定されたキー文字列の値を設定するために使用されます。 マップに以前に同じキー文字列のエントリがあった場合、古いエントリは新しい値に置き換えられます。
  • * map.remove（key）*-マップエントリを削除するために使用されます。 キーが指定されていない場合、falseを返します。
  • * map.clear（）*-このマップからすべてのエントリを削除します。
  • * map.keys（）*-このマップ内のすべてのエントリの文字列キーの配列を返します。
  • * map.values（）*-このマップのすべてのエントリの値の配列を返します。
  • * map.entries（）*-このマップの各エントリのキー値オブジェクトの配列を返します。
  • （x）map.each（function）-このメソッドは、マップ内の各エントリに対して指定された関数を呼び出すために使用されます。
  • （xi）map.empty（）-このマップにエントリがゼロの場合にのみtrueを返します。
  • （xii）map.size（）-このマップのエントリの数を返します。

例-Webページ mapsl を作成し、以下の変更を加えます。 

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 collection API</h3>
      <script>
         var month = d3.map([{name: "jan"}, {name: "feb"}],
            function(d) { return d.name; });
         console.log(month.get("jan"));//{"name": "jan"}
         console.log(month.get("apr"));//undefined
         console.log(month.has("feb"));//true

         var map =  d3.map().set("fruit", "mango");
         console.log(map.get("fruit"));//mango
         console.log(map.remove("fruit"));//remove key and return true.
         console.log(map.size());   //size is 0 because key removed.
         console.log(map.empty());  //true
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

Map API

同様に、他の操作も実行できます。

APIを設定します

セットは、重複した要素を含むことのできないコレクションです。 数学的な集合の抽象化をモデル化します。 さまざまなSets APIメソッドを詳しく見ていきましょう。

  • * d3.set（[array [、accessor]]）*-このメソッドは、新しいセットを作成するために使用されます。 配列は、文字列値を追加するために使用されます。 アクセサーはオプションです。
  • * set.has（value）*-このメソッドは、指定された値文字列のエントリがセットにあるかどうかを確認するために使用されます。
  • * set.add（value）*-指定された値文字列をセットに追加するために使用されます。
  • * set.remove（value）*-指定された値文字列を含むセットを削除するために使用されます。
  • * set.clear（）*-このセットからすべての値を削除します。
  • * set.values（）*-このメソッドは、値の配列をセットに返すために使用されます。
  • * set.empty（）*-このセットにゼロ値がある場合にのみtrueを返します。
  • * set.size（）*-このセットの値の数を返します。

例-Webページ setsl を作成し、以下の変更を追加します。 

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 collection API</h3>
      <script>
         var fruits =  d3.set().add("mango")
          .add("apple").add("orange");
         console.log(fruits.has("grapes"));//return false.
         console.log(fruits.remove("apple"));//true
         console.log(fruits.size());   //size is 2
         console.log(fruits.empty());  //true
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、画面に次の応答が表示されます。

Sets API

同様に、他の操作も実行できます。

Nests API

ネストAPIには配列の要素が含まれ、階層ツリー構造で実行されます。 さまざまなNests APIメソッドを詳しく見ていきましょう。

  • * d3.nest（）*-このメソッドは、新しいネストを作成するために使用されます。
  • * nest.key（key）*-このメソッドは、新しいキー機能を初期化するために使用されます。 この関数は、入力配列内の各要素を呼び出し、グループ内の要素を返すために使用されます。
  • * nest.sortKeys（comparator）*-このメソッドは、指定されたコンパレータでキーをソートするために使用されます。 関数はd3.ascendingまたはd3.descendingとして定義されています。
  • * nest.sortValues（comparator）*-このメソッドは、指定されたコンパレータで値をソートするために使用されます。 コンパレータ関数は、リーフ要素をソートします。
  • * nest.map（array）*-このメソッドは、指定された配列を適​​用し、ネストされたマップを返すために使用されます。 返されるマップの各エントリは、最初のキー関数によって返される個別のキー値に対応します。 入力値は、登録されているキー機能の数に依存します。
  • * nest.object（array）*-このメソッドは、指定された配列にネスト演算子を適用し、ネストされたオブジェクトを返すために使用されます。
  • * nest.entries（array）*-このメソッドは、指定された配列にネスト演算子を適用し、キーと値のエントリの配列を返すために使用されます。

上記のネスト方法を実行するための単純なWebページ nestl について考えます。

例-次の例を考えてみましょう。 

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 Nest API</h3>
      <script>
         var data = [
            {
               "color" : "red",
               "key" : 1
            },
            {
               "color" : "green",
               "key" : 2
            },
            {
               "color" : "blue",
               "key" : 75
            }
         ]
         var nest =  d3.nest()
            .key(function (d) { return d.color; })
            .entries(data)console.log(nest);
         var filter = nest.filter(function (d) { return d.key = = = 'red' })
         console.log(filter);
      </script>
   </body>
</html>

ブラウザで結果を確認すると、次の結果が表示されます。 

Array[3]
0: Object
1: Object
2: Object
length: 3
__proto__: Array[0]

Array[1]
0: Object
length: 1
__proto__: Array[0]

D3.js-選択API

選択は、ドキュメントオブジェクトモデル（DOM）の強力なデータ駆動型変換です。 属性、スタイル、プロパティ、HTMLまたはテキストコンテンツなどを設定するために使用されます。 この章では、選択APIについて詳しく説明します。

APIの構成

以下のスクリプトを使用して、APIを直接構成できます。 

<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script>

</script>

選択APIメソッド

選択APIで最も重要なメソッドは次のとおりです。

  • d3.selection（）
  • d3.select（selector）
  • d3.selectAll（selector）
  • selection.selectAll（selector）
  • selection.filter（フィルター）
  • selection.merge（other）
  • d3.matcher（selector）
  • d3.creator（name）
  • selection.each（関数）
  • selection.call（function [、arguments…]）
  • d3.local（）
  • local.set（node、value）
  • local.get（ノード）
  • local.remove（ノード）

次に、これらのそれぞれについて詳しく説明します。

d3.selection（）

このメソッドは、ルート要素を選択するために使用されます。 この関数は、選択のテストや選択d3jsの拡張にも使用できます。

d3.select（selector）

このメソッドは、指定されたセレクター文字列に一致する最初の要素を選択するために使用されます。

例-次の例を考えてみましょう。 

var body = d3.select("body");

セレクタが文字列でない場合、以下で定義されている指定されたノードを選択します。 

d3.select("p").style("color", "red");

d3.selectAll（selector）

このメソッドは、指定されたセレクター文字列に一致するすべての要素を選択します。

例-次の例を考えてみましょう。 

var body = d3.selectAll("body");

セレクタが文字列でない場合、以下で定義されているノードの指定された配列を選択します。 

d3.selectAll("body").style("color", "red");

selection.selectAll（selector）

このメソッドは、要素を選択するために使用されます。 指定されたセレクター文字列に一致する子孫要素を選択します。 返される選択の要素は、この選択の対応する親ノードによってグループ化されます。 現在の要素の指定されたセレクタに一致する要素がない場合、またはセレクタがnullの場合、現在のインデックスのグループは空になります。

例-次の例を考えてみましょう。 

var b = d3.selectAll("p").selectAll("b");

selection.filter（フィルター）

このメソッドは、選択をフィルタリングするために使用され、指定されたフィルタがtrueである要素のみを含む新しい選択を返します。

例-次の例を考えてみましょう。 

var even = d3.selectAll("tr").filter(":nth-child(odd)");

ここでは、テーブル行の選択をフィルターすると、奇数のみが返されます。

selection.merge（other）

このメソッドは、指定された他の選択とマージする新しい選択を返すために使用されます。

例-次の例を考えてみましょう。 

var rect = svg.selectAll("rect").data(data);
rect.enter().append("rect").merge(rect);

d3.matcher（selector）

このメソッドは、指定されたセレクターを割り当てるために使用されます。 trueを返す関数を返します。

例-次の例を考えてみましょう。 

var p = selection.filter(d3.matcher("p"));

d3.creator（name）

このメソッドは、指定された要素名を割り当てるために使用されます。これは、これが親要素であると仮定して、指定された名前の要素を作成する関数を返します。

例-次の例を考えてみましょう。 

selection.append(d3.creator("p"));

selection.each（関数）

このメソッドは、現在のデータム（d）、現在のインデックス（i）、および現在のDOM要素（nodes [i ]）。 以下で説明します。 

parent.each(function(p, j) {
   d3.select(this)
      .selectAll(".child")
      .text(function(d, i) { return "child " + d.name + " of " + p.name; });
});

selection.call（function [、arguments…]）

指定された関数を1回だけ呼び出すために使用されます。 構文は次のとおりです。 

function name(selection, first, last) {
   selection.attr("first-name", first).attr("last-name", last);
}

このメソッドは、次のように指定できます。 

d3.selectAll("p").call(name, "Adam", "David");

d3.local（）

D3ローカルでは、データに依存しないローカル状態を定義できます。

例-次の例を考えてみましょう。 

var data = d3.local();

varとは異なり、各ローカルの値もDOMによってスコープされます。

local.set（node、value）

このメソッドは、指定されたノード上のこのローカルの値を値に設定します。

例-次の例を考えてみましょう。 

selection.each(function(d)
   { data.set(this, d.value); });
local.get(node)

このメソッドは、指定されたノード上のこのローカルの値を返します。 ノードがこのローカルを定義しない場合、ノードを定義する最も近い先祖から値を返します。

local.remove（ノード）

このメソッドは、指定されたノードからこのローカルの値を削除します。 ノードが定義されている場合はtrueを返し、そうでない場合はfalseを返します。

D3.js-Paths API

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

パスの構成

以下のスクリプトを使用して、Paths APIを構成できます。 

<script src = "https://d3js.org/d3-path.v1.min.js"></script>
<script>

</script>

Paths APIメソッド

最も一般的に使用されるPaths APIメソッドの一部について、以下に簡単に説明します。

  • * d3.path（）*-このメソッドは、新しいパスを作成するために使用されます。
  • * path.moveTo（x、y）*-このメソッドは、指定されたxおよびy値を移動するために使用されます。
  • * path.closePath（）*-このメソッドは、現在のパスを閉じるために使用されます。
  • * path.lineTo（x、y）*-このメソッドは、現在の点から定義されたx、y値までの線を作成するために使用されます。
  • * path.quadraticCurveTo（cpx、cpy、x、y）*-このメソッドは、現在の点から指定された点まで二次曲線を描くために使用されます。
  • * path.bezierCurveTo（cpx1、cpy1、cpx2、cpy2、x、y）*-このメソッドは、現在の点から指定された点までベジェ曲線を描くために使用されます。
  • * path.arcTo（x1、y1、x2、y2、radius）*-このメソッドは、現在の点から指定された点（x1、y1）に円弧を描き、指定された点（x1、 y1）および（x2、y2）。
  • * path.arc（x、y、radius、startAngle、endAngle [、anticlockwise]）*-このメソッドは、指定された中心（x、y）、radius、startAngle、endAngleに円弧を描くために使用されます。 反時計回りの値がtrueの場合、円弧は反時計回りの方向に描画され、そうでない場合は時計回りの方向に描画されます。
  • * path.rect（x、y、w、h）*-このメソッドは、4つのポイント（x、y）、（x + w、y）、（x + w、y + h）、（x、y + h）。 これらの4つのポイントが直線で接続されていると、サブパスは閉じているとマークされます。 context.rectと同等で、SVGの「lineto」コマンドを使用します。
  • * path.toString（）*-SVGのパスデータ仕様に従って、このパスの文字列表現を返します。

例

パスAPIを使用してD3に簡単な線を引きましょう。 Webページ linepathl を作成し、次の変更を加えます。 

<!DOCTYPE html>
<meta charset = "UTF-8">
   <head>
      <title>SVG path line Generator</title>
   </head>

   <style>
      path {
         fill: green;
         stroke: #aaa;
      }
   </style>

   <body>
      <svg width = "600" height = "100">
         <path transform = "translate(200, 0)"/>
      </svg>

      <script src = "https://d3js.org/d3.v4.min.js"></script>
      <script>
         var data = [[var lineGenerator = d3.line();
         var pathString = lineGenerator(data);
         d3.select('path').attr('d', pathString);
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次の結果が表示されます。

D3.js-Scales API

D3.jsは、データ変換を実行するためのスケール関数を提供します。 これらの関数は、入力ドメインを出力範囲にマップします。

APIの構成

次のスクリプトを使用して、APIを直接構成できます。 

<script src = "https://d3js.org/d3-array.v1.min.js"></script>
<script src = "https://d3js.org/d3-collection.v1.min.js"></script>
<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-format.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-time.v1.min.js"></script>
<script src = "https://d3js.org/d3-time-format.v2.min.js"></script>
<script src = "https://d3js.org/d3-scale.v1.min.js"></script>
<script>

</script>

スケールAPIメソッド

D3は、さまざまなタイプのチャートに次の重要なスケーリング方法を提供します。 その後、詳細に理解しましょう。

  • * d3.scaleLinear（）*-指定された出力範囲にデータ（ドメイン）マップを入力できる連続線形スケールを作成します。
  • * d3.scaleIdentity（）*-入力データが出力と同じである線形スケールを構築します。
  • * d3.scaleTime（）*-入力データが日付であり、出力が数値である線形スケールを構築します。
  • * d3.scaleLog（）*-対数目盛を作成します。
  • * d3.scaleSqrt（）*-平方根スケールを構築します。
  • * d3.scalePow（）*-指数スケールを構築します。
  • * d3.scaleSequential（）*-出力範囲が補間関数によって固定されている順次スケールを構築します。
  • * d3.scaleQuantize（）*-離散出力範囲で量子化スケールを構築します。
  • * d3.scaleQuantile（）*-入力サンプルデータが離散出力範囲にマッピングされる分位スケールを構築します。
  • * d3.scaleThreshold（）*-任意の入力データが離散出力範囲にマッピングされるスケールを構築します。
  • * d3.scaleBand（）*-バンドスケールは、出力範囲が連続的かつ数値であることを除いて、順序スケールに似ています。
  • * d3.scalePoint（）*-点スケールを作成します。
  • * d3.scaleOrdinal（）*-入力データにアルファベットが含まれ、離散数値出力範囲にマップされる順序スケールを作成します。

作業例を行う前に、まず次の2つの用語を理解しましょう-

  • ドメイン-ドメインは、入力データの最小値と最大値を示します。
  • 範囲-範囲は出力範囲であり、入力値をマッピングしたい…​

実施例

この例でd3.scaleLinear関数を実行してみましょう。 これを行うには、次の手順に従う必要があります-

ステップ1 *-*変数の定義-以下のコーディングを使用してSVG変数とデータを定義します。 

var data = [100, 200, 300, 400, 800, 0]
   var width = 500,
      barHeight = 20,
      margin = 1;

ステップ2 *-*線形スケールの作成-次のコードを使用して線形スケールを作成します。 

var scale = d3.scaleLinear()
   .domain([d3.min(data), d3.max(data)])
   .range([100, 400]);

ここで、ドメインの最小値と最大値を手動で使用するには、組み込みの* d3.min（）および d3.max（）*関数を使用できます。これらの関数は、データ配列からそれぞれ最小値と最大値を返します。

ステップ3 *- SVG属性の追加*-以下のコードを使用してSVG要素を追加します。 

var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", barHeight * data.length);

ステップ4 *-*変換の適用-以下のコードを使用して変換を適用します。 

var g = svg.selectAll("g")
   .data(data).enter().append("g")
   .attr("transform", function (d, i) {
      return "translate(0," + i * barHeight + ")";
});

ステップ5 *- rect要素の追加*-下に示すように、rect要素をスケーリングに追加します。 

g.append("rect")
   .attr("width", function (d) {
      return scale(d);
   })
   .attr("height", barHeight - margin)

ステップ6 *-*データの表示-次に、以下のコーディングを使用してデータを表示します。 

g.append("text")
   .attr("x", function (d) { return (scale(d)); })
   .attr("y", barHeight/2)
   .attr("dy", ".35em")
   .text(function (d) { return d; });

ステップ7 *-*作業例-次に、次のようにd3.scaleLinear（）関数を使用して棒グラフを作成します。

ウェブページ「scalesl」を作成し、以下の変更を加えます。 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         var data = [100, 200, 300, 350, 400, 250]
         var width = 500, barHeight = 20, margin = 1;

         var scale = d3.scaleLinear()
            .domain([d3.min(data), d3.max(data)])
            .range([100, 400]);

         var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", barHeight *data.length);

         var g = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function (d, i) {
               return "translate(0," + i* barHeight + ")";
         });

         g.append("rect")
         .attr("width", function (d) {
            return scale(d);
         })

         .attr("height", barHeight - margin)
         g.append("text")
         .attr("x", function (d) { return (scale(d)); })
         .attr("y", barHeight/2).attr("dy", ".35em")
         .text(function (d) { return d; });
      </script>
   </body>
</html>

上記のコードは、ブラウザに次の結果を表示します。

D3.js-Axis API

D3は、軸を描画する関数を提供します。 軸は、線、目盛り、ラベルで構成されます。 軸はスケールを使用するため、各軸にはスケールを与える必要があります。

Axis APIの構成

次のスクリプトを使用してAPIを構成できます。 

<script src = "https://d3js.org/d3-axis.v1.min.js"></script>
<script>

</script>

Axis APIメソッド

D3は、軸を描くために次の重要な機能を提供します。 以下に簡単に説明します。

  • * d3.axisTop（）*-このメソッドは、上部の水平軸を作成するために使用されます。
  • * d3.axisRight（）*-このメソッドは、垂直の右向きの軸を作成するために使用されます。
  • * d3.axisBottom（）*-このメソッドは、下部の水平軸を作成するために使用されます。
  • * d3.axisLeft（）*-左の垂直軸を作成します。

実施例

x軸とy軸をグラフに追加する方法を学びましょう。 これを行うには、以下の手順に従う必要があります。

ステップ1 *-*変数の定義-以下のコードを使用してSVGおよびデータ変数を定義します。 

var width = 400, height = 400;
var data = [100, 150, 200, 250, 280, 300];
var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", height);

ステップ2 *-*スケール線形関数の作成-以下で定義するように、x軸とy軸の両方に対してスケール線形関数を作成します。 

var xscale = d3.scaleLinear()
   .domain([0, d3.max(data)])
   .range([0, width - 100]);

var yscale = d3.scaleLinear()
   .domain([0, d3.max(data)])
   .range([height/2, 0]);

ここでは、線形スケールを作成し、ドメインと範囲を指定しました。

ステップ3 *- x軸にスケールを追加*-次のコードを使用して、x軸にスケールを追加できます。 

var x_axis = d3.axisBottom()
   .scale(xscale);

ここでは、d3.axisBottomを使用してx軸を作成し、前に定義したスケールを提供します。

ステップ4 *-*スケールをy軸に追加-次のコードを使用してスケールをy軸に追加します。 

var y_axis = d3.axisLeft()
   .scale(yscale);

ここでは、d3.axisLeftを使用してy軸を作成し、上記で定義したスケールを提供します。

ステップ5 *-*変換の適用-グループ要素を追加して、以下で定義するx、y軸を挿入できます。 

svg.append("g")
   .attr("transform", "translate(50, 10)")
   .call(y_axis);

ステップ6 *-*グループ要素の追加-次のコードを使用して、遷移およびグループ要素を適用します。 

var xAxisTranslate = height/2 + 10;
svg.append("g")
   .attr("transform", "translate(50, " + xAxisTranslate  +")")
   .call(x_axis)

ステップ7 *-*作業例-完全なコードリストを次のコードブロックに示します。 Webページ axesl を作成し、次の変更を加えます。 

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         svg text {
            fill: purple;
            font: 12px sans-serif;
            text-anchor: end;
         }
      </style>
   </head>

   <body>
      <script>
         var width = 400, height = 400;
         var data = [100, 120, 140, 160, 180, 200];
         var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

         var xscale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([0, width - 100]);

         var yscale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([height/2, 0]);

         var x_axis = d3.axisBottom().scale(xscale);

         var y_axis = d3.axisLeft().scale(yscale);

         svg.append("g")
            .attr("transform", "translate(50, 10)")
            .call(y_axis);

         var xAxisTranslate = height/2 + 10;

         svg.append("g")
            .attr("transform", "translate(50, " + xAxisTranslate  +")")
            .call(x_axis)
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次の変更が表示されます。

D3.js-Shapes API

この章では、D3.jsのさまざまな形状ジェネレーターについて説明します。

APIの構成

次のスクリプトを使用してShapes APIを構成できます。 

<script src = "https://d3js.org/d3-path.v1.min.js"></script>
<script src = "https://d3js.org/d3-shape.v1.min.js"></script>
<script>

</script>

シェイプジェネレーター

D3.jsはさまざまな形状をサポートしています。 顕著な形を詳細に見ていきましょう。

Arcs API

アークジェネレーターは、円または環状の形状を生成します。 前の円グラフの章でこれらのAPIメソッドを使用しました。 さまざまなArcs APIメソッドを詳細に理解しましょう。

  • * d3.arc（）*-このメソッドは、新しいアークジェネレータを作成するために使用されます。
  • * arc（args）*-指定された引数でアークを生成するために使用されます。 オブジェクトの半径と角度のデフォルト設定を以下に定義します。
<script>
   var arc = d3.arc();
   arc({
      innerRadius: 0,
      outerRadius: 100,
      startAngle: 0,
      endAngle: Math.PI/2
   });
</script>
  • * arc.centroid（args）*-このメソッドは、指定された引数でアークの中心線の中点[x、y]を計算するために使用されます。
  • * arc.innerRadius（[radius]）*-このメソッドは、指定された半径から内側の半径を設定し、アークジェネレータを返すために使用されます。 以下に定義されています-
function innerRadius(d) {
   return d.innerRadius;
}
  • * arc.outerRadius（[radius]）*-このメソッドは、指定された半径から外半径を設定し、アークジェネレータを返すために使用されます。 次のように定義されています。
function outerRadius(d) {
   return d.outerRadius;
}
  • * arc.cornerRadius（[radius]）*-このメソッドは、指定された半径からコーナー半径を設定し、アークジェネレータを返すために使用されます。 次のように定義されています。
function cornerRadius() {
   return 0;
}

角の半径がゼロより大きい場合、円弧の角は指定された半径の円を使用して丸められます。 角の半径は（outerRadius-innerRadius）/2より大きくすることはできません。

  • * arc.startAngle（[angle]）*-このメソッドは、指定された角度から関数に開始角度を設定するために使用されます。 次のように定義されます-
function startAngle(d) {
   return d.startAngle;
}
  • * arc.endAngle（[angle]）*-このメソッドは、指定された角度から関数に終了角度を設定するために使用されます。 次のように定義されています。
function endAngle(d) {
   return d.endAngle;
}
  • * arc.padAngle（[angle]）*-このメソッドは、与えられた角度からパッド角度を関数に設定するために使用されます。 次のように定義されています。
function padAngle() {
   return d && d.padAngle;
}
  • （x）arc.padRadius（[radius]）-このメソッドは、パッド半径を指定された半径から指定された関数に設定するために使用されます。 パッド半径は、padRadius * padAngleとして定義される、隣接する円弧を分離する固定線形距離を決定します。
  • （xi）arc.context（[context]）-このメソッドは、コンテキストを設定し、アークジェネレータを返すために使用されます。

Pies API

このAPIは、パイジェネレーターの作成に使用されます。 前の章でこれらのAPIメソッドを実行しました。 これらすべての方法について詳しく説明します。

  • * d3.pie（）*-デフォルト設定で新しいパイジェネレータを構築します。
  • * pie（data [、arguments]）*-このメソッドは、指定された配列値のパイを生成するために使用されます。 オブジェクトの配列を返します。 オブジェクトはデータムの円弧角度です。 各オブジェクトには、次のプロパティがあります-
  • data -入力データ;入力データ配列内の対応する要素。
  • 値-アークの数値。
  • index -弧のインデックス。
  • startAngle -弧の開始角度。
  • endAngle -弧の終了角度。
  • padAngle -円弧のパッド角度。
  • * pie.value（[value]）*-このメソッドは、指定された関数に値を設定し、パイを生成するために使用されます。 次のように定義されます-
function value(d) {
   return d;
}
  • * pie.sort（[compare]）*-このメソッドは、指定された関数にデータをソートし、パイを生成するために使用されます。 コンパレータ機能は次のように定義されます。
pie.sort(function(a, b)
   { return a.name.localeCompare(b.name); }
);

ここで、比較関数は2つの引数「a」と「b」を取り、各要素は入力データ配列から取得します。 「a」のアークが「b」のアークの前にある場合、コンパレータはゼロ未満の数値を返す必要があります。 「a」のアークが「b」のアークの後にある場合、コンパレータはゼロより大きい数値を返す必要があります。

  • * pie.sortValues（[compare]）*-このメソッドは、指定された関数の値を比較し、パイを生成するために使用されます。 関数は次のように定義されます。
function compare(a, b) {
   return b - a;
}
  • * pie.startAngle（[angle]）*-このメソッドは、パイの開始角度を指定された関数に設定するために使用されます。 角度が指定されていない場合、現在の開始角度が返されます。 次のように定義されています。
function startAngle() {
   return 0;
}
  • * pie.endAngle（[angle]）*-このメソッドは、パイの終了角度を指定された関数に設定するために使用されます。 角度が指定されていない場合、現在の終了角度が返されます。 次のように定義されています。
function endAngle() {
   return 2 * Math.PI;
}
  • * pie.padAngle（[angle]）*-このメソッドは、指定された関数にパッド角度を設定し、パイを生成するために使用されます。 関数は次のように定義されます。
function padAngle() {
   return 0;
}

Lines API

Lines APIは、行を生成するために使用されます。 *グラフ*の章でこれらのAPIメソッドを使用しました。 各メソッドを詳しく見ていきましょう。

  • * d3.line（）*-このメソッドは、新しいラインジェネレータを作成するために使用されます。
  • * line（data）*-このメソッドは、指定されたデータの配列の行を生成するために使用されます。
  • * line.x（[x]）*-このメソッドは、xアクセサーを指定された関数に設定し、行を生成するために使用されます。 関数は以下で定義されます、
function x(d) {
   return d[0];
}
  • * line.y（[y]）*-このメソッドは、指定された関数に「y」アクセサーを設定し、行を生成するために使用されます。 関数は次のように定義されます。
function y(d) {
   return d[1];
}
  • * line.defined（[defined]）*-このメソッドは、定義されたアクセサーを指定された関数に設定するために使用されます。 次のように定義されています。
function defined() {
  return true;
}
  • * line.curve（[curve]）*-曲線を設定し、線を生成するために使用されます。
  • * line.context（[context]）*-このメソッドは、コンテキストを設定し、行を生成するために使用されます。 コンテキストが指定されていない場合、nullを返します。
  • * d3.lineRadial（）*-このメソッドは、新しい放射状の線を作成するために使用されます。デカルト線ジェネレーターと同等です。
  • * lineRadial.radius（[radius]）*-このメソッドは、放射状の線を描画するために使用され、アクセサーは半径を返します。 origin（0,0）からの距離を取ります。

次の章では、D3.jsのColors APIについて学びます。

D3.js-Colors API

色は赤、緑、青を組み合わせて表示されます。 色は、次の異なる方法で指定することができます-

  • 色名で
  • RGB値として
  • 16進値として
  • HSL値として
  • HWB値として

d3-color APIは、さまざまな色の表現を提供します。 APIで変換および操作操作を実行できます。 これらの操作を詳細に理解しましょう。

APIの構成

次のスクリプトを使用して、APIを直接ロードできます。 

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script>

</script>

基本操作

D3の基本的なカラー操作を見てみましょう。

カラー値をHSLに変換-カラー値をHSLに変換するには、以下を使用します*例*- 

var convert = d3.hsl("green");

以下に示すように、色相を45°回転できます。 

convert.h + =  45;

同様に、飽和レベルも変更できます。 色の値をフェードするには、以下に示すように不透明度の値を変更できます。 

convert.opacity = 0.5;

カラーAPIメソッド

以下は、最も重要なColor APIメソッドの一部です。

  • d3.color（指定子）
  • color.opacity
  • color.rgb（）
  • color.toString（）
  • color.displayable（）
  • d3.rgb（色）
  • d3.hsl（色）
  • d3.lab（色）
  • d3.hcl（色）
  • d3.cubehelix（色）

これらの各Color APIメソッドを詳細に理解しましょう。

d3.color（指定子）

指定されたCSSカラーを解析し、RGBまたはHSLカラーを返すために使用されます。 指定子が指定されていない場合、nullが返されます。

例-次の例を考えてみましょう。 

<script>
   var color = d3.color("green"); //asign color name directly
   console.log(color);
</script>

画面に次の応答が表示されます- 

{r: 0, g: 128, b: 0, opacity: 1}

color.opacity

色をフェードしたい場合は、不透明度の値を変更できます。 [0、1]の範囲です。

例-次の例を考えてみましょう。 

<script>
   var color = d3.color("green");
   console.log(color.opacity);
</script>

画面に次の応答が表示されます- 

1

color.rgb（）

色のRGB値を返します。 次の例を考えてみましょう。 

<script>
   var color = d3.color("green");
   console.log(color.rgb());
</script>

画面に次の応答が表示されます。 

{r: 0, g: 128, b: 0, opacity: 1}

color.toString（）

CSS Object Model仕様に従って色を表す文字列を返します。 次の例を考えてみましょう。 

<script>
   var color = d3.color("green");
   console.log(color.toString());
</script>

画面に次の応答が表示されます。 

rgb(0, 128, 0)

color.displayable（）

色が表示可能な場合、trueを返します。 RGBカラー値が0未満または255より大きい場合、または不透明度が範囲[0、1]にない場合、falseを返します。 次の例を考えてみましょう。 

<script>
   var color = d3.color("green");
   console.log(color.displayable());
</script>

画面に次の応答が表示されます。 

true

d3.rgb（色）

このメソッドは、新しいRGBカラーを作成するために使用されます。 次の例を考えてみましょう。 

<script>
   console.log(d3.rgb("yellow"));
   console.log(d3.rgb(200,100,0));
</script>

画面に次の応答が表示されます。 

{r: 255, g: 255, b: 0, opacity: 1}
{r: 200, g: 100, b: 0, opacity: 1}

d3.hsl（色）

新しいHSLカラーを作成するために使用されます。 値は、返されたインスタンスのh、s、およびlプロパティとして公開されます。 次の例を考えてみましょう。 

<script>
   var hsl = d3.hsl("blue");
   console.log(hsl.h + =  90);
   console.log(hsl.opacity = 0.5);
</script>

画面に次の応答が表示されます。 

330
0.5

d3.lab（色）

新しいLabカラーを構築します。 チャネル値は、返されたインスタンスの「l」、「a」、「b」プロパティとして公開されます。 

<script>
   var lab = d3.lab("blue");
   console.log(lab);
</script>

画面に次の応答が表示されます。 

{l: 32.29701093285073, a: 79.18751984512221, b: -107.8601617541481, opacity: 1}

d3.hcl（色）

新しいHCLカラーを構築します。 チャネル値は、返されたインスタンスのh、c、およびlプロパティとして公開されます。 次の例を考えてみましょう。 

<script>
   var hcl = d3.hcl("blue");
   console.log(hcl);
</script>

画面に次の応答が表示されます。 

{h: 306.2849380699878, c: 133.80761485376166, l: 32.29701093285073, opacity: 1}

d3.cubehelix（色）

新しいCubehelixカラーを構築します。 値は、返されたインスタンスのh、s、およびlプロパティとして公開されます。 次の例を考えてみましょう。 

<script>
   var hcl = d3.hcl("blue");
   console.log(hcl);
</script>

画面に次の応答が表示されます。 

{h: 236.94217167732103, s: 4.614386868039719, l: 0.10999954957200976, opacity: 1}

実施例

新しいWebページを作成してみましょう–すべてのカラーAPIメソッドを実行する colorl 。 完全なコードリストを以下に定義します。 

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 colors API</h3>
      <script>
         var color = d3.color("green");
         console.log(color);
         console.log(color.opacity);
         console.log(color.rgb());
         console.log(color.toString());
         console.log(color.displayable());
         console.log(d3.rgb("yellow"));
         console.log(d3.rgb(200,100,0));
         var hsl = d3.hsl("blue");
         console.log(hsl.h + =  90);
         console.log(hsl.opacity = 0.5);
         var lab = d3.lab("blue");
         console.log(lab);
         var hcl = d3.hcl("blue");
         console.log(hcl);
         var cube = d3.cubehelix("blue");
         console.log(cube);
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

Colors API

D3.js-トランジションAPI

D3トランジションは、要素の選択と各要素を取得します。要素の現在の定義の一部に遷移を適用します。

APIの構成

次のスクリプトを使用して、移行APIを構成できます。 

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script>

</script>

移行APIメソッド

Transition APIメソッドについて詳しく見ていきましょう。

要素を選択する

さまざまな選択要素について詳しく説明します。

  • * selection.transition（[name]）*-このメソッドは、名前を持つ新しい選択遷移を返すために使用されます。 名前が指定されていない場合、nullを返します。
  • * selection.interrupt（[name]）*-このメソッドは、遷移の選択された要素を名前で中断するために使用され、以下で定義されます。
selection.interrupt().selectAll("*").interrupt();
  • * d3.interrupt（node [、name]）*-このメソッドは、指定されたノード上の指定された名前の遷移を中断するために使用されます。
  • * d3.transition（[name]）*-このメソッドは、指定された名前の新しい遷移を返すために使用されます。
  • * transition.select（selector）*-このメソッドは、指定されたセレクターに一致する最初の要素を選択するために使用され、結果の選択で遷移を返します。
transition
   .selection()
   .select(selector)
   .transition(transition)
  • * transition.selectAll（selector）*-このメソッドは、指定されたセレクタに一致するすべての要素を選択するために使用され、結果の選択で遷移を返します。 以下に定義されています-
transition
   .selection()
   .selectAll(selector)
   .transition(transition)
  • * transition.filter（filter）*-このメソッドは、指定されたフィルターに一致する要素を選択するために使用されます。それらは以下で定義されます。
transition
   .selection()
   .filter(filter)
   .transition(transition)
  • * transition.merge（other）*-このメソッドは、遷移を他の遷移とマージするために使用されます。 以下に定義されています。
transition
   .selection()
   .merge(other.selection())
   .transition(transition)
  • * transition.transition（）*-このメソッドは、選択した要素の新しい遷移を返すために使用されます。 移行が停止すると開始するようにスケジュールされています。 新しいトランジションは、このトランジションの名前、期間、イージングを継承します。

例-次の例を考えてみましょう。 

d3.selectAll(".body")
   .transition()

  //fade to yellow.
   .style("fill", "yellow")
   .transition()

  //Wait for five second. Then change blue, and remove.
   .delay(5000)
   .style("fill", "blue")
   .remove();

ここで、ボディは黄色にフェードし、最後の遷移の5秒前に開始します。

  • * d3.active（node [、name]）*-このメソッドは、名前を持つ指定されたノードの遷移を返すために使用されます。

タイミング方法

遷移タイミングAPIメソッドを詳しく見ていきましょう。

  • * transition.delay（[value]）*-このメソッドは、遷移遅延を指定された値に設定するために使用されます。 選択された各要素に対して関数が評価される場合、コンテキストは現在のDOM要素として、現在のデータム「d」およびインデックス「i」に渡されます。 値が指定されていない場合、遷移の最初の（非ヌル）要素の遅延の現在の値を返します。 以下で定義されています。
transition.delay(function(d, i) { return i * 10; });
  • * transition.duration（[value]）*-このメソッドは、遷移期間を指定された値に設定するために使用されます。 値が指定されていない場合、遷移の最初の（非null）要素の継続時間の現在の値を返します。
  • * transition.ease（[value]）*-このメソッドは、選択した要素の遷移値を緩和するために使用されます。 イージング関数は、アニメーションの各フレームに対して呼び出され、範囲[0、1]の正規化された時間「t」を渡します。 値が指定されていない場合、遷移の最初の（非null）要素の現在のイージング関数を返します。

次の章では、d3.jsのドラッグアンドドロップの概念について説明します。

D3.js-ドラッグAPI

ドラッグアンドドロップは、d3.jsで最もよく知られている概念の1つです。 この章では、ドラッグとその方法について詳しく説明します。

インストール

次のスクリプトを使用して、ドラッグAPIを直接含めることができます。 

<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-drag.v1.min.js"></script>

APIメソッドのドラッグ

以下は、D3.jsで最も重要なドラッグAPIメソッドの一部です。

  • d3.drag（）
  • ドラッグ（選択）
  • drag.container（[コンテナ]）
  • drag.filter（[フィルター]）
  • drag.subject（[subject]）
  • drag.clickDistance（[距離]）
  • drag.on（typenames、[listener]）
  • d3.dragDisable（window） *d3.dragEnable（window [、noclick]）

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

d3.drag（）

このメソッドは、新しいドラッグを作成するために使用されます。 次のスクリプトを使用して、このメソッドを呼び出すことができます。 

<script>
   var drag = d3.drag();
</script>

ドラッグ（選択）

このメソッドは、指定した選択にドラッグを適用するために使用されます。* selection.call *を使用してこの関数を呼び出すことができます。 簡単な例を以下に定義します。 

d3.select(".node").call(d3.drag().on("drag", mousemove));

ここでは、選択した要素に適用されるドラッグ動作はselection.callを介しています。 

drag.container([container])

ドラッグのために指定された関数にコンテナを設定するために使用されます。 コンテナが指定されていない場合、現在のアクセサが返されます。 Canvasでグラフィック要素をドラッグするには、コンテナをそれ自体として再定義できます。 以下に定義されています。 

function container() {
   return this;
}

drag.filter（[フィルター]）

指定された関数のフィルターを設定するために使用されます。 フィルターが指定されていない場合、以下に定義されているように現在のフィルターを返します。 

function filter() {
   return !d3.event.button;
}

drag.subject（[subject]）

これは、サブジェクトをドラッグ用に指定された関数に設定するために使用され、以下で定義されます。 

function subject(d) {
   return d = =  null ? {x: d3.event.x, y: d3.event.y} : d;
}

ここで、件名はドラッグされているものを表します。 たとえば、SVGで長方形要素をドラッグする場合、デフォルトの件名はドラッグされる長方形のデータムです。

drag.clickDistance（[距離]）

このメソッドは、mousedownおよびmouseupイベントをクリックするための最大距離を設定するために使用されます。 距離が指定されていない場合、ゼロを指します。

drag.on（typenames、[listener]）

このメソッドは、ドラッグするために指定されたタイプ名のイベントリスナーを設定するために使用されます。 タイプ名は、空白で区切られた1つ以上のタイプ名を含む文字列です。 各タイプ名はタイプであり、オプションでピリオド（。）と名前（drag.oneやdrag.twoなど）が続きます。 このタイプは、次のいずれかからでなければなりません-

  • start -新しいポインタを開始します。
  • drag -アクティブなポインターをドラッグします。
  • end -アクティブでないアクティブなポインタ。

d3.dragDisable（window）

このメソッドは、ドラッグアンドドロップ選択を無効にするために使用されます。 mousedownイベントアクションを防ぎます。 選択したブラウザのほとんどは、デフォルトでこのアクションをサポートしています。 サポートされていない場合は、CSSプロパティをnoneに設定できます。

d3.dragEnable（window [、noclick]）

このメソッドは、指定されたウィンドウ位置でのドラッグアンドドロップ選択を有効にするために使用されます。 mouseupイベントアクションを呼び出すために使用されます。 noclick値をtrueに割り当てると、クリックイベントはゼロミリ秒のタイムアウトで期限切れになります。

ドラッグAPI-ドラッグイベント

D3.eventメソッドは、ドラッグイベントを設定するために使用されます。 それは次のフィールドで構成されています-

  • ターゲット-ドラッグ動作を表します。
  • タイプ-これは文字列で、次のいずれかです。「開始」、「ドラッグ」または「終了」。
  • Subject -drag.subjectによって定義されるドラッグサブジェクト。

event.on（typenames、[listener]）

イベントオブジェクトは、ドラッグを実行するevent.onメソッドを公開します。 次のように定義されています。 

d3.event.on("drag", dragged).on("end", ended);

D3.js-ズームAPI

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

APIの構成

次のスクリプトを使用して、「d3js.org」からZooming APIを直接ロードできます。 

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script src = "https://d3js.org/d3-drag.v1.min.js"></script>
<script src = "https://d3js.org/d3-zoom.v1.min.js"></script>

<body>
   <script>
   </script>
</body>

ズームAPIメソッド

以下は、最も一般的に使用されるZooming APIメソッドの一部です。

  • d3.zoom（）
  • ズーム（選択）
  • zoom.transform（選択、変換）
  • zoom.translateBy（selection、x、y）
  • zoom.translateTo（selection、x、y）
  • zoom.scaleTo（選択、k）
  • zoom.scaleBy（選択、k）
  • zoom.filter（[フィルター]）
  • zoom.wheelDelta（[delta]）
  • zoom.extent（[extent]）
  • zoom.scaleExtent（[extent]）
  • zoom.translateExtent（[extent]）
  • zoom.clickDistance（[距離]）
  • zoom.duration（[duration]）
  • zoom.interpolate（[補間]）
  • zoom.on（typenames [、listener]）

これらすべてのZooming APIメソッドについて簡単に説明します。

d3.zoom（）

新しいズーム動作を作成します。 以下のスクリプトを使用してアクセスできます。 

<script>
   var zoom = d3.zoom();
</script>

ズーム（選択）

選択した要素にズーム変換を適用するために使用されます。 たとえば、次の構文を使用してmousedown.zoom動作をインスタンス化できます。 

selection.call(d3.zoom().on("mousedown.zoom", mousedowned));

zoom.transform（選択、変換）

選択した要素の現在のズーム変換を指定した変換に設定するために使用されます。 たとえば、次の構文を使用してズーム変換を恒等変換にリセットできます。 

selection.call(zoom.transform, d3.zoomIdentity);

次の構文を使用して、ズーム変換を1000ミリ秒の間アイデンティティ変換にリセットすることもできます。 

selection.transition().duration(1000).call(zoom.transform, d3.zoomIdentity);

zoom.translateBy（selection、x、y）

選択した要素の現在のズーム変換をx値とy値で変換するために使用されます。 xおよびyの変換値は、数値または数値を返す関数として指定できます。 選択した要素に対して関数が呼び出されると、現在のデータム「d」とDOMのインデックス「i」を介して渡されます。 サンプルコードを以下に定義します。 

zoom.translateBy(selection, x, y) {
   zoom.transform(selection, function() {
      return constrain(this.__zoom.translate(
         x = = = "function" ? x.apply(this, arguments) : x,
         y = = = "function" ? y.apply(this, arguments) : y
      );
   }
};

zoom.translateTo（selection、x、y）

選択した要素の現在のズーム変換を、指定されたxおよびyの位置に変換するために使用されます。

zoom.scaleTo（選択、k）

選択した要素の現在のズーム変換を k にスケーリングするために使用されます。 ここで、 k はスケール係数であり、数値または関数として指定されます。 

zoom.scaleTo = function(selection, k) {
   zoom.transform(selection, function() {
      k = = = "function" ? k.apply(this, arguments) : k;
   });
};

zoom.scaleBy（選択、k）

これは、選択した要素の現在のゾーン変換を k でスケーリングするために使用されます。 ここで、 k はスケールファクターであり、数値または数値を返す関数として指定されます。 

zoom.scaleBy = function(selection, k) {
   zoom.scaleTo(selection, function() {
      var k0 = this.__zoom.k,
      k1 = k = = = "function" ? k.apply(this, arguments) : k;
      return k0 * k1;
   });
};

zoom.filter（[フィルター]）

ズーム動作のために指定された関数にフィルターを設定するために使用されます。 フィルターが指定されていない場合、以下に示すように現在のフィルターを返します。 

function filter() {
   return !d3.event.button;
}

zoom.wheelDelta（[delta]）

  • Δ*の値は、ホイールデルタ関数によって返されます。 デルタが指定されていない場合、現在のホイールデルタ関数を返します。

zoom.extent（[extent]）

指定された配列ポイントに範囲を設定するために使用されます。 エクステントが指定されていない場合、現在のエクステントアクセサを返します。デフォルトはwidth、heightです。widthは要素のクライアント幅で、heightはクライアントの高さです。

zoom.scaleExtent（[extent]）

スケール範囲を指定された数の配列[k0、k1]に設定するために使用されます。 ここで、 k0 は最小許容スケール係数です。 一方、 k1 は最大許容倍率です。 範囲が指定されていない場合、現在のスケール範囲を返します。デフォルトは[0、∞]です。 以下に定義されているサンプルコードを検討してください。 

selection
   .call(zoom)
   .on("wheel", function() { d3.event.preventDefault(); });

ユーザーは、対応するスケール範囲の制限に既に達している場合、ホイールでズームを試みることができます。 スケール範囲に関係なくホイール入力のスクロールを防止する場合は、ホイールイベントリスナーを登録して、ブラウザーのデフォルトの動作を防止します。

zoom.translateExtent（[extent]）

範囲が指定されている場合、変換範囲を指定されたポイントの配列に設定します。 範囲が指定されていない場合、現在の変換範囲が返されます。デフォルトは[[zoom.clickDistance（[distance]）

このメソッドは、ズーム可能な領域が上下に移動できる最大距離を設定するために使用され、後続のクリックイベントをトリガーします。

zoom.duration（[duration]）

このメソッドは、ダブルクリックおよびダブルタップでのズーム遷移の期間を指定されたミリ秒数に設定し、ズーム動作を返すために使用されます。 期間が指定されていない場合は、現在の期間が返されます。デフォルトは250ミリ秒です。 

selection
   .call(zoom)
   .on("dblclick.zoom", null);

zoom.interpolate（[補間]）

このメソッドは、指定された関数へのズーム遷移を補間するために使用されます。 interpolateが指定されていない場合、現在の補間ファクトリを返します。デフォルトはd3.interpolateZoomです。

zoom.on（typenames [、listener]）

リスナーが指定されている場合、指定されたタイプ名のイベントリスナーを設定し、ズーム動作を返します。 タイプ名は、空白で区切られた1つ以上のタイプ名を含む文字列です。 各タイプ名はタイプであり、オプションでピリオド（。）とzoom.oneやzoom.secondなどの名前が続きます。 この名前を使用すると、同じタイプに対して複数のリスナーを登録できます。 このタイプは、次のいずれかからでなければなりません-

  • 開始-ズームの開始後（マウスダウン時など）。
  • Zoom -ズーム変換の変更後（mousemoveなど）。
  • 終了-ズームが終了した後（mouseupなど）。

次の章では、D3.jsのさまざまなリクエストAPIについて説明します。

D3.js-リクエストAPI

D3.jsは、XMLHttpRequestを実行するリクエストAPIを提供します。 この章では、さまざまなリクエストAPIについて詳しく説明します。

XMLHttpRequest

XMLHttpRequestは、ブラウザのXMLHttpRequestオブジェクトをエミュレートする組み込みのhttpクライアントです。 ブラウザ用に設計されたJSとともに使用して、コードの再利用を改善し、既存のライブラリを使用できるようにします。

以下に説明するように、プロジェクトにモジュールを含めて、ブラウザーベースのXHRオブジェクトとして使用できます。 

var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var xhr = new XMLHttpRequest();

非同期要求と同期要求の両方をサポートし、GET、POST、PUT、およびDELETE要求を実行します。

リクエストの構成

以下のスクリプトを使用して、「d3js.org」から直接読み込むことができます。 

<script src = "https://d3js.org/d3-request.v1.min.js"></script>
<script>
   d3.json("/path/to/sample.json", callback);
</script>

ここで、リクエストAPIにはJSON、CSV、TSVの解析のサポートが組み込まれています。 リクエストまたはテキストを直接使用して、追加の形式を解析できます。

テキストファイルを読み込む

テキストファイルを読み込むには、次の構文を使用します。 

d3.text("/path/to/sample.txt", function(error, text) {
   if (error) throw error;
   console.log(text);
});

CSVファイルの解析

CSVファイルを読み込んで解析するには、次の構文を使用します。 

d3.csv("/path/to/sample.csv", function(error, data) {
   if (error) throw error;
   console.log(data);
});

同様に、JSONファイルとTSVファイルもロードできます。

実施例

CSVファイルを読み込んで解析する方法の簡単な例を見てみましょう。 その前に、以下に示すように、d3アプリケーションフォルダーに「sample.csv」という名前のCSVファイルを作成する必要があります。 

Num1,Num2
1,2
3,4
5,6
7,8
9,10

ここで、次のスクリプトを使用してWebページ「requestsl」を作成します。 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> D3.js Requests API </h3>
      <script>
         d3.csv("sample.csv", function(data) {
            console.log(data);
         });
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次の応答が表示されます。

リクエストAPI

リクエストAPIメソッド

以下は、最も一般的に使用されるRequests APIメソッドの一部です。

  • d3.request（url [、callback]）
  • request.header（name [、value]）
  • request.mimeType（[type]）
  • request.user（[値]）
  • request.password（[値]）
  • request.timeout（[timeout]）
  • request.get（[データ]）
  • request.post（[データ]）
  • request.send（method [、data]）
  • request.abort（）
  • d3.csv（url [[row]、callback]）

これらのそれぞれについて簡単に説明しましょう。

d3.request（url [、callback]）

指定されたURLの新しいリクエストを返します。 コールバックが割り当てられている場合、それは呼び出し要求と見なされます。それ以外の場合、要求はまだ呼び出されません。 以下に定義されています。 

d3.request(url)
   .get(callback);

次の構文を使用して、いくつかのクエリパラメータを投稿できます。 

d3.request("/path/to/resource")
   .header("X-Requested-With", "XMLHttpRequest")
   .header("Content-Type", "application/x-www-form-urlencoded")
   .post("a = 2&b = 3", callback);

要求ヘッダーまたはMIMEタイプを指定する場合は、コンストラクターにコールバックを指定しないでください。

request.header（name [、value]）

指定された名前のリクエストヘッダーに値を設定するために使用されます。 値が指定されていない場合、指定された名前の要求ヘッダーが削除されます。 以下に定義されています。 

d3.request(url)
   .header("Accept-Language", "en-US")
   .header("X-Requested-With", "XMLHttpRequest")
   .get(callback);

ここでは、XMLHttpRequestへのX-Requested-Withヘッダーがデフォルトのリクエストです。

request.mimeType（[type]）

指定された値にMIMEタイプを割り当てるために使用されます。 以下に定義されています。 

d3.request(url)
   .mimeType("text/csv")
   .get(callback);

request.user（[値]）

認証にユーザー名を割り当てるために使用されます。 ユーザー名が指定されていない場合、デフォルトでnullになります。

request.password（[値]）

値を指定すると、認証用のパスワードが設定されます。

request.timeout（[timeout]）

タイムアウトが指定されている場合、タイムアウトは指定されたミリ秒数に設定されます。

request.get（[データ]）

このメソッドは、GETメソッドでリクエストを送信するために使用されます。 以下に定義されています。 

request.send("GET", data, callback);

request.post（[データ]）

このメソッドは、POSTメソッドでリクエストを送信するために使用されます。 以下に定義されています。 

request.send("POST", data, callback);

request.send（method [、data]）

このメソッドは、指定されたGETまたはPOSTメソッドを使用してリクエストを送信するために使用されます。

request.abort（）

このメソッドは、リクエストを中止するために使用されます。

d3.csv（url [[row]、callback]）

デフォルトのMIMEタイプtext/csvを使用して、指定されたURLにあるCSVファイルの新しいリクエストを返します。 次の構文は、コールバックなしで示しています。 

d3.request(url)
   .mimeType("text/csv")
   .response(function(xhr) { return d3.csvParse(xhr.responseText, row); });

POSTメソッドでコールバックを指定する場合、以下で定義されます。 

d3.request(url)
   .mimeType("text/csv")
   .response(function(xhr) { return d3.csvParse(xhr.responseText, row); })
   .post(callback);

例

d3アプリケーションのルートフォルダディレクトリに「lang.csv」という名前のcsvファイルを作成し、次の変更を追加します。 

Year,Language,Author
1972,C,Dennis Ritchie
1995,Java,James gosling
2011,D3 js,Mike Bostock

Webページ「csvl」を作成し、それに次のスクリプトを追加します。 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> D3.js request API</h3>
      <script>
         d3.csv("lang.csv", function(d) {
            return {
               year: new Date(+d.Year, 0, 1),//convert "Year" column to Date
               language: d.Language,
               author: d.Author,
            };
         }, function(error, rows) {
            console.log(error);
            console.log(rows[0].year);
         });
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

CSV

D3.js-区切り文字区切り値API

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

APIの構成

次の構文を使用して、APIを簡単にロードできます。 

<script src = "https://d3js.org/d3-dsv.v1.min.js"></script>
<script>
   var data = d3.csvParse(string);
</script>

APIメソッド

以下は、区切り文字で区切られた値のさまざまなAPIメソッドです。

  • d3.csvParse（string [、row]）
  • d3.csvParseRows（string [、row]）
  • d3.csvFormat（rows [、columns]）
  • d3.csvFormatRows（rows）
  • d3.tsvParse（string [、row]）
  • d3.tsvParseRows（string [、row]）
  • d3.tsvFormat（rows [、columns]）
  • d3.tsvFormatRows（rows）

これらの各APIメソッドを詳しく見ていきましょう。

d3.csvParse（string [、row]）

このメソッドは、csv形式を解析するために使用されます。 以下に示すファイル data.csv を検討してください。 

year,population
2006,40
2008,45
2010,48
2012,51
2014,53
2016,57
2017,62

これで、上記の関数を適用できます。

例-次の例を考えてみましょう。 

var data = d3.csvParse(string, function(d) {
   return {
      year: new Date(+d.Year, 0, 1),//lowercase and convert "Year" to Date
      population: d.population
   };
});

ここでは、区切り文字で区切られた値の指定された文字列を解析します。 解析された行を表すオブジェクトの配列を返します。

d3.csvParseRows（string [、row]）

このメソッドは、行に相当するcsv形式を解析するために使用されます。 

var data = d3.csvParseRows(string, function(d, i) {
   return {
      year: new Date(+d[0], 0, 1),//convert first colum column to Date
      population: d[1],
   };
});

csvファイルの各行を解析します。

d3.csvFormat（rows [、columns]）

このメソッドは、csvの行と列をフォーマットするために使用されます。

例-次の例を考えてみましょう。 

var string = d3.csvFormat(data, ["year", "population"]);

ここで、列が指定されていない場合、ヘッダー行を形成する列名のリストは、行内のすべてのオブジェクトのすべてのプロパティの和集合によって決定されます。 列が指定されている場合、列名を表す文字列の配列です。

d3.csvFormatRows（rows）

このメソッドは、csv行をフォーマットするために使用されます。

例-次の例を考えてみましょう。 

var string = d3.csvFormatRows(data.map(function(d, i) {
   return [
      d.year.getFullYear(),//Assuming d.year is a Date object.
      d.population
   ];
}));

ここでは、指定された文字列行の配列を区切り文字で区切られた値としてフォーマットし、文字列を返します。

d3.tsvParse（string [、row]）

このメソッドは、tsv形式を解析するために使用されます。 csvParseに似ています。

d3.tsvParseRows（string [、row]）

このメソッドは、行に相当するtsv形式を解析するために使用されます。 csvParseRows関数に似ています。

d3.tsvFormat（rows [、columns]）

このメソッドは、tsvの行と列をフォーマットするために使用されます。

d3.tsvFormatRows（rows）

このメソッドは、tsv行をフォーマットするために使用されます。

D3.js-タイマーAPI

タイマーAPIモジュールは、同期されたタイミング遅延で同時アニメーションを実行するために使用されます。 アニメーションには requestAnimationFrame を使用します。 この章では、タイマーAPIモジュールについて詳しく説明します。

requestAnimationFrame

このメソッドは、アニメーションを実行することをブラウザに通知し、ブラウザが指定された関数を呼び出してアニメーションを更新することを要求します。

タイマーの構成

次のスクリプトを使用して、d3js.orgからタイマーを簡単に直接読み込むことができます。 

<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script>
   var timer = d3.timer(callback);
</script>

タイマーAPIメソッド

Timer APIは、次の重要なメソッドをサポートしています。 これらはすべて、次のように詳細に説明されています。

d3.now（）

このメソッドは現在の時刻を返します。

d3.timer（callback [、delay [、time]]）

このメソッドは、新しいタイマーをスケジュールし、停止するまでタイマーを呼び出すために使用されます。 MSに数値遅延を設定できますが、それ以外の場合はオプションであり、デフォルトはゼロです。 時間が指定されていない場合、d3.now（）と見なされます。

timer.restart（callback [、delay [、time]]）

指定されたコールバックとオプションの遅延と時間でタイマーを再起動します。

timer.stop（）

このメソッドはタイマーを停止し、その後のコールバックを防ぎます。

d3.timeout（callback [、delay [、time]]）

最初のコールバックでタイマーを停止するために使用されます。 コールバックは経過時間として渡されます。

d3.interval（callback [、delay [、time]]）

特定の時間遅延間隔で呼び出されます。 遅延が指定されていない場合、タイマー時間がかかります。

例

Webページ「timerl」を作成し、それに次のスクリプトを追加します。 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> Timer API </h3>
      <script>
         var timer = d3.timer(function(duration) {
            console.log(duration);
            if (duration > 150) timer.stop();
         }, 100);
      </script>
   </body>
</html>

画面に次の応答が表示されます。

タイマーAPI

D3.js-作業例

この章では、アニメーション化された棒グラフを実行しましょう。 この例では、人口記録の前章で使用したdata.csvファイルをデータセットとして使用し、アニメーション化された棒グラフを生成します。

これを行うには、次の手順を実行する必要があります-

ステップ1 *-*スタイルを適用-以下に示すコーディングを使用してCSSスタイルを適用します。 

<style>
   .bar {
      fill: green;
   }

   .highlight {
      fill: red;
   }

   .title {
      fill: blue;
      font-weight: bold;
   }
</style>

ステップ2 *-*変数の定義-以下のスクリプトを使用してSVG属性を定義します。 

<script>
   var svg = d3.select("svg"), margin = 200,
   width = svg.attr("width") - margin,
   height = svg.attr("height") - margin;
</script>

ステップ3 *-*テキストの追加-次に、テキストを追加し、以下のコーディングを使用して変換を適用します。 

svg.append("text")
   .attr("transform", "translate(100,0)")
   .attr("x", 50)
   .attr("y", 50)
   .attr("font-size", "20px")
   .attr("class", "title")
   .text("Population bar chart")

ステップ4 *-*スケール範囲の作成-このステップでは、スケール範囲を作成し、グループ要素を追加できます。 以下に定義されています。 

var x = d3.scaleBand().range([0, width]).padding(0.4),
   y = d3.scaleLinear()
      .range([height, 0]);
   var g = svg.append("g")
      .attr("transform", "translate(" + 100 + "," + 100 + ")");

ステップ5 *-*データの読み取り-前の例では、すでに data.csv ファイルを作成しています。 同じファイル、ここで使用しました。 

year,population
2006,40
2008,45
2010,48
2012,51
2014,53
2016,57
2017,62

次に、以下のコードを使用して上記のファイルを読み取ります。 

d3.csv("data.csv", function(error, data) {
   if (error) {
      throw error;
   }

ステップ6 *-*ドメインの設定-次に、以下のコーディングを使用してドメインを設定します。 

x.domain(data.map(function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);

ステップ7 *- X軸の追加*-これで、X軸を変換に追加できます。 以下に示します。 

g.append("g")
   .attr("transform", "translate(0," + height + ")")
   .call(d3.axisBottom(x)).append("text")
   .attr("y", height - 250).attr("x", width - 100)
   .attr("text-anchor", "end").attr("font-size", "18px")
   .attr("stroke", "blue").text("year");

ステップ8 *- Y軸の追加*-以下に示すコードを使用して、Y軸を変換に追加します。 

g.append("g")
   .append("text").attr("transform", "rotate(-90)")
   .attr("y", 6).attr("dy", "-5.1em")
   .attr("text-anchor", "end").attr("font-size", "18px")
   .attr("stroke", "blue").text("population");

ステップ9 *-*グループ要素の追加-次に、グループ要素を追加し、以下で定義するようにY軸に変換を適用します。 

g.append("g")
   .attr("transform", "translate(0, 0)")
   .call(d3.axisLeft(y))

ステップ10 *-*バークラスを選択-次に、以下で定義するようにバークラスのすべての要素を選択します。 

g.selectAll(".bar")
   .data(data).enter()
   .append("rect")
   .attr("class", "bar")
   .on("mouseover", onMouseOver)
   .on("mouseout", onMouseOut)
   .attr("x", function(d) { return x(d.year); })
   .attr("y", function(d) { return y(d.population); })
   .attr("width", x.bandwidth())
   .transition()
   .ease(d3.easeLinear)
   .duration(200)
   .delay(function (d, i) {
      return i * 25;
   })
   .attr("height", function(d) { return height - y(d.population); });
});

ここでは、アニメーションを実行するためのmouseoutおよびmouseoverのリスナーイベントを追加しました。 マウスが特定のバーの上にホバーし、そこから出たときにアニメーションを適用します。 これらの機能については、次のステップで説明します。

  • .ease（d3.easeLinear）*関数は、アニメーションで見かけの動きを実行するために使用されます。 200の持続時間でスローインおよびスローアウトモーションを処理します。 遅延は次を使用して計算できます-
.delay(function (d, i) {
   return i * 25;
})

ステップ11 *-*マウスオーバーイベントハンドラー関数-マウスオーバーイベントハンドラーを作成して、次のようにマウスイベントを処理します。 

function onMouseOver(d, i) {
   d3.select(this)
      .attr('class', 'highlight');
   d3.select(this)
      .transition()
      .duration(200)
      .attr('width', x.bandwidth() + 5)
      .attr("y", function(d) { return y(d.population) - 10; })
      .attr("height", function(d) { return height - y(d.population) + 10; });
   g.append("text")
      .attr('class', 'val')

   .attr('x', function() {
      return x(d.year);
   })

   .attr('y', function() {
      return y(d.value) - 10;
   })
}

ここで、マウスオーバーイベントで、バーの幅と高さを増やし、選択したバーのバーの色を赤にします。 色については、選択したバーの色を赤に変更するクラス「ハイライト」を追加しました。

200ミリ秒の期間のバーへの遷移関数。 バーの幅を5px、高さを10px増やすと、バーの以前の幅と高さから新しい幅と高さへの移行は200ミリ秒の期間になります。

次に、新しい高さの値によってバーが歪まないように、バーの新しい「y」値を計算しました。

ステップ12 *- Mouseoutイベントハンドラー関数*-マウスイベントを処理するmouseoutイベントハンドラーを作成します。 以下に定義されています。 

function onMouseOut(d, i) {
   d3.select(this).attr('class', 'bar');

   d3.select(this)
      .transition()
      .duration(400).attr('width', x.bandwidth())
      .attr("y", function(d) { return y(d.population); })
      .attr("height", function(d) { return height - y(d.population); });

   d3.selectAll('.val')
      .remove()
}

ここで、mouseoutイベントで、mouseoverイベントで適用した選択機能を削除します。 したがって、バークラスを元の「バー」クラスに戻し、選択したバーの幅と高さを元に戻し、y値を元の値に戻します。

  • d3.selectAll（ ‘。val’）。remove（）*関数は、バーの選択中に追加したテキスト値を削除するために使用されます。

ステップ13 *-*作業例-完全なプログラムは、次のコードブロックに記載されています。 animated_barl というWebページを作成し、次の変更を加えます。 

<!DOCTYPE html>
<html>
   <head>
      <style>
         .bar {
            fill: green;
         }

         .highlight {
            fill: red;
         }

         .title {
            fill: blue;
            font-weight: bold;
         }
      </style>
      <script src = "https://d3js.org/d3.v4.min.js"></script>
      <title> Animated bar chart </title>
   </head>

   <body>
      <svg width = "500" height = "500"></svg>
      <script>
         var svg = d3.select("svg"),
         margin = 200, width = svg.attr("width") - margin,
         height = svg.attr("height") - margin;

         svg.append("text")
            .attr("transform", "translate(100,0)")
            .attr("x", 50).attr("y", 50)
            .attr("font-size", "20px")
            .attr("class", "title")
            .text("Population bar chart")

         var x = d3.scaleBand().range([0, width]).padding(0.4),
         y = d3.scaleLinear().range([height, 0]);

         var g = svg.append("g")
            .attr("transform", "translate(" + 100 + "," + 100 + ")");

         d3.csv("data.csv", function(error, data) {
            if (error) {
               throw error;
            }

            x.domain(data.map(function(d) { return d.year; }));
            y.domain([0, d3.max(data, function(d) { return d.population; })]);

            g.append("g")
               .attr("transform", "translate(0," + height + ")")
               .call(d3.axisBottom(x))
               .append("text")
               .attr("y", height - 250)
               .attr("x", width - 100)
               .attr("text-anchor", "end")
               .attr("font-size", "18px")
               .attr("stroke", "blue").text("year");

            g.append("g")
               .append("text")
               .attr("transform", "rotate(-90)")
               .attr("y", 6)
               .attr("dy", "-5.1em")
               .attr("text-anchor", "end")
               .attr("font-size", "18px")
               .attr("stroke", "blue")
               .text("population");

            g.append("g")
               .attr("transform", "translate(0, 0)")
               .call(d3.axisLeft(y))

            g.selectAll(".bar")
               .data(data)
               .enter()
               .append("rect")
               .attr("class", "bar")
               .on("mouseover", onMouseOver)
               .on("mouseout", onMouseOut)
               .attr("x", function(d) { return x(d.year); })
               .attr("y", function(d) { return y(d.population); })
               .attr("width", x.bandwidth()).transition()
               .ease(d3.easeLinear).duration(200)
               .delay(function (d, i) {
                  return i * 25;
               })

            .attr("height", function(d) { return height - y(d.population); });
         });


         function onMouseOver(d, i) {
            d3.select(this)
            .attr('class', 'highlight');

            d3.select(this)
               .transition()
               .duration(200)
               .attr('width', x.bandwidth() + 5)
               .attr("y", function(d) { return y(d.population) - 10; })
               .attr("height", function(d) { return height - y(d.population) + 10; });

            g.append("text")
               .attr('class', 'val')
               .attr('x', function() {
                  return x(d.year);
               })

            .attr('y', function() {
               return y(d.value) - 10;
            })
         }

         function onMouseOut(d, i) {

            d3.select(this)
               .attr('class', 'bar');

            d3.select(this)
               .transition()
               .duration(200)
               .attr('width', x.bandwidth())
               .attr("y", function(d) { return y(d.population); })
               .attr("height", function(d) { return height - y(d.population); });

            d3.selectAll('.val')
               .remove()
         }
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

アニメーションバー

バーを選択すると、赤色で強調表示されます。 D3は、データの情報、ドキュメント、要素などへの変換を扱う汎用視覚化ライブラリであり、最終的にはデータ視覚化の作成に役立ちます。

「https://www.finddevguides.com/index.php?title=D3js-quick-guide&oldid=78828」から取得
Powered by MediaWiki