D3.js-インストール

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

D3.jsライブラリ
Editor
ウェブブラウザ
Webサーバー

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

D3.jsライブラリ

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

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

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

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

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

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

<!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を使用する場合、ソースコードをダウンロードする必要はありません。

CDNURLを使用してD3.jsライブラリを含める https://d3js.org/d3.v4.min.js 以下に示すように私たちのページに。

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

<!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（統合開発環境）がいくつかあります。

VisualStudioコード
WebStorm
Eclipse
崇高なテキスト

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

ウェブブラウザ

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

Webサーバー

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

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

あなたのページを見る

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