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）*からページを表示する方が信頼性が高くなります。

D3js-installation

目次