一直想好好學學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。
<code><
script
src
="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"
integrity
="sha512-C2RveGuPIWqkaLAluvoxyiaN1XYNe5ss11urhZWZYBUA9Ydgj+hfGKPcxCzTwut1/fmjEZR7Ac35f2aycT8Ogw=="
crossorigin
="anonymous"
>script
>/<code>
框架頁面代碼：
<code> ><
html
lang
="en"
><
head
><
meta
charset
="utf-8"
><
title
>D3開發頁面模板title
>head
><
body
><
script
src
="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"
integrity
="sha512-C2RveGuPIWqkaLAluvoxyiaN1XYNe5ss11urhZWZYBUA9Ydgj+hfGKPcxCzTwut1/fmjEZR7Ac35f2aycT8Ogw=="
crossorigin
="anonymous"
>script
>body
>html
>/<code>
本文的代碼盒子編號為25號，在PC上訪問: https://daima.co/25
測試一下
我們用這段代碼做個測試，看看環境設立成功了沒有：
<code>d3
.select
("body"
).append
("h1"
).text
("Hello D3!"
);/<code>
暫時還沒有涉及到可視化。不過您可能已經發現了，D3其實可以拿來當jQuery，操作DOM，也有人真這樣用。不過這不是D3的設計目的。
設置成功：
開發環境測試成功
抄一段別人的演示代碼，看看可視化效果
條狀圖出來了。代碼就不解釋了，主要是測試下可視化環境搭建好了沒有。
預告：下一篇將研究D3的核心概念 data binding，數據綁定
