《D3.js資料可視化實戰手冊》—— 1.2 搭建一個簡易的D3開發環境

本節書摘來異步社群《d3.js資料可視化實戰手冊》一書中的第1章，第1.2節，作者： 【加拿大】nick qi zhu，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

d3.js資料可視化實戰手冊

在開始使用d3之前，我們要做的第一件事是搭建一個開發環境。這節裡，我們将告訴你如何在幾分鐘内搭建一個簡單的d3開發環境。

在我們開始前，請確定你已經安裝好一個文本編輯器。

我們先要下載下傳d3.js。

1．我們可以在<code>http://d3js.org/</code>下載下傳最新版本的d3.js，也可以在<code>https://github. com/mbostock/d3/tags</code>下載下傳之前的版本。另外，如果你對開發中的最新d3版本感興趣，可以fork以下的代碼庫<code>https://github.com/mbostock/d3</code>。

2．下載下傳并且解壓縮後，我們得到了3個檔案：d3.v3.js、d3.v3.min.js和許可證檔案。在開發過程中，建議使用d3.v3.js，它可以幫你深入到d3庫中跟蹤調試javascript代碼。把d3.v3.js和建立的index.html放在同一個檔案夾裡，index.html應該包含下面的代碼。

圖像說明文字 如果是直接下載下傳源代碼或者tagged 版本，javascript檔案的名字會略微不同，叫做d3.js，而非d3.v3.js。

我們已經搭建了一個最簡單的d3資料可視化開發環境。現在可以用我們最喜歡的文本編輯器編輯那個html檔案，還可以用浏覽器打開它來檢查可視化的效果。

圖像說明文字可以在這裡下載下傳這個例子的源碼：<code>https://github. com/nickqizhu/d3-cookbook/tree/master/ src/chapter1/simple-dev-env</code>。

d3是個相當獨立的程式庫。它不依賴于特定浏覽器提供的功能以及其他javascript庫。實際上，你甚至可以通過簡單的配置，讓d3脫離浏覽器而在諸如node.js這樣的環境中運作起來（後面的章節會更詳細地介紹這點）。

圖像說明文字如果你的浏覽器是ie9，建議使用aight相容庫和sizzle selector engine。其中前者可以在這裡下載下傳：<code>https:// github.com/shawnbot/aight</code>，而後者可以在這裡下載下傳：<code>http://sizzlejs.com/</code>。

html檔案的頭部資訊中必須包含如下的編碼格式聲明。

git clone git://github.com/nickqizhu/d3-cookbook.git