一直想好好學學Web資料視覺化神器D3，可是忙於開發程式碼盒子，還有其他瑣事，沒有動手。
現在程式碼盒子Beta上線了，有了自家的平臺，也有了點時間，再也找不到藉口了。
藉著海子的詩，
從明天起，做一個幸福的人
餵馬、劈柴，周遊世界
從明天起，關心糧食和蔬菜
我有一所房子，面朝大海，春暖花開
從明天起，和每一個親人通訊
告訴他們我的幸福
那幸福的閃電告訴我的
我將告訴每一個人
給每一條河每一座山取一個溫暖的名字
陌生人，我也為你祝福
願你有一個燦爛的前程
願你有情人終成眷屬
願你在塵世獲得幸福
我只願面朝大海，春暖花開
許個願望
從明天起，做一個幸福的人
學點D3，寫點程式碼，周遊世界
從明天起，關心糧食和蔬菜
我有一所房子，面朝大海，春暖花開
不等明天了，現在就開始吧。
參考資料
D3 官網： https：//d3js。org/
D3 Github倉庫： https：//github。com/d3/d3
D3 創始人，Mike Bostock搞的線上資料視覺化平臺：https：//observablehq。com/
書：Interactive Data Visualization for the Web， 2nd Edition， Scott Murray
本文的程式碼盒子編號為25號，在PC上訪問： https：//daima。co/25
D3簡介
D3，也稱D3。js，是Data Drive Document的縮寫。Data由使用者提供，Document指的是Web的Document，D3負責驅動，連線Data和Document。
D3的主要創始人是大神Mike Bostock。盜個官方影象：
Mike Bostock
大夥自己去他的Wiki頁看看他的介紹吧。
D3做什麼
D3將資料載入到瀏覽器記憶體
D3將資料繫結到web document，根據需要建立新的web元素
解析繫結的資料，設定對應的視覺化效果，轉換web元素
根據使用者輸入，轉換元素狀態
D3不幹什麼
D3不提供預先定義好的視覺化影象。D3的定位是底層庫，使用者或第三方庫利用D3，生成視覺化效果。
D3不支援舊的瀏覽器。當然這裡指很老的瀏覽器比如IE8。D3和IE9、以及Chrome、Firefox等都有很好的相容性。
D3核心模組不支援點陣圖操作。D3擅長向量圖片如SVG，有第三方外掛支援點陣圖操作，比如d3-tile
D3不隱藏使用者資料。D3在瀏覽器端執行，如果使用者對資料保密有很高要求，只能在伺服器端渲染，要麼不用D3，要麼採用特殊的伺服器端預渲染生成圖片，不過這就不支援前端互動了。
設定學習、測試環境
利用cdnjs提供的免費cdn服務，用script標籤匯入D3。
框架頁面程式碼：
<！DOCTYPE html>
本文的程式碼盒子編號為25號，在PC上訪問： https：//daima。co/25
測試一下
我們用這段程式碼做個測試，看看環境設立成功了沒有：
d3。select（“body”）。append（“h1”）。text（“Hello D3！”）；
暫時還沒有涉及到視覺化。不過您可能已經發現了，D3其實可以拿來當jQuery，操作DOM，也有人真這樣用。不過這不是D3的設計目的。
設定成功：
開發環境測試成功
抄一段別人的演示程式碼，看看視覺化效果
條狀圖出來了。程式碼就不解釋了，主要是測試下視覺化環境搭建好了沒有。
預告：下一篇將研究D3的核心概念 data binding，資料繫結
如果您覺得我們的文章對您有用，給個贊，關注下我們，分享給您的朋友，就是最大的支援。
