現在的前端和以前相比已經有了翻天覆地的改變，從混沌時期的原生 JS 到以操作 DOM 為主的 jQuery，再到三大框架 React、Angular 和 Vue，Node.js 讓前端程式設計師們也有能力把手伸向以前從未踏足過的伺服器端領域，Electron 讓前端程式設計師製作桌面應用成為可能，樹莓派/Ruff 讓 JavaScript 在物聯網（IOT）中也有了一席之地。
而本文所講的 D3.js 是資料視覺化這一門類的庫，JavaScript 再下一城池。
D3.js 是什麼
D3.js（或稱 D3，指 Data-Driven Document，資料驅動文件）是一個 JavaScript 庫，以操作文件物件模型（Document Object Model，DOM）樹的方式向使用者直觀地展示資料資訊，現已成為網路中資訊圖形的事實標準。
1) D3 不是圖形庫，而是一個 DOM 操作庫
儘管它的受歡迎程度很高，但它的學習曲線並不平坦。當然，我本人並不認為 D3 很複雜，也並不認為其龐大的 API 阻塞了開發者的學習道路（雖然說確實不少，但它的 API 結構和設計都很棒）。相反，我認為新使用者遇到的許多困難都來自於他們想得太多。
因為人們經常看到由 D3 開發的令人驚豔的圖表，所以開發者們自然而然地將其視為一個“圖形庫”，他們從內心深處認為 D3 安排了圖基，從而為常見的繪圖型別提供了高階支援。
正是這種先入為主的期望讓使用者在設定元素的顏色時面對冗長的指令感到不爽，這個“選擇集”（selection）功能是做什麼的？我直接用 canvas 畫不行麼？
這裡的錯誤就是 D3 不是圖形庫。相反，它是一個操作 DOM 樹的 JavaScript 庫。
D3 的基本構建單元不是圓形或矩形，而是節點和 DOM 元素。D3 並不涉及在 canvas 上繪製圖形形狀，而是通過屬性來設定元素的樣式。元素的“當前位置”和 canvas 上的 xy 坐標沒有相似性，而是從 DOM 樹節點的選擇集中獲取。
2) 學習 D3 無需深入演技 Web 前端技術
接下來是讓新使用者望而卻步的第二道坎。D3 作為和網頁相關的技術，同樣也依賴著其他的網頁技術，比如 DOM API 和事件模型、CSS 選擇器和屬性、JavaScript 物件模型，當然還有可縮放向量圖形（Scalable Vector Graphics，SVG）。在大多數情況下，D3 沒有很深入地使用這些技術，且其自身的設計也處處反映了底層 API。
這就讓環境一下子變得複雜了起來。如果你已經對 HTML5 等現代 Web 技術棧很熟悉了，那麼你就會覺得毫無壓力，否則的話，沒有特定的抽象思維可能會讓你感到困惑。
值得慶幸的是，你無須深入研究所有這些基礎技術。D3 為了讓使用者易於理解提供了大量的統一封裝。
唯一一個需要了解的技術是 SVG。你必須花時間來充分了解它，不僅要了解指代的元素，還要了解圖形中控制資訊組織的結構元素。如果你不熟悉 SVG，那麼我真誠地建議你在學習 D3 之前先自行學習一下。
為什麼選擇 D3
為什麼 D3 能夠獲得程式設計師和科研人員——甚至是非 Web 開發人員的青睞呢？
1) D3 提供了一種通過 Web 構建圖形的便捷方式。
如果你從事的是資料和視覺化工作，通常來說你會在繪圖程式中輸入資料，然後將結果儲存成 PNG 或 PDF，接下來建立一個帶有 <img> 標籤的網頁，以讓他人看到你的工作。如若可以一鍵完成上面這些步驟，何樂而不為呢？
2) 更重要的是，D3 簡化了建立動畫和互動式圖形的方式。
這一點也許不應該過分強調：同其他領域一樣，科學視覺化也可以從動畫和互動當中受益——雖然眾所周知這個目標在過去很難實現。它經常需要加入一些複雜或不匹配的技術（聽過 Xlib 程式設計嗎？），抑或是新增一些專業但昂貴的商業軟體包。D3 讓你把上面的一切都拋諸腦後，將最現代的視覺化需求呈現在你的面前。
3) 除了圖形之外，D3 是一個易學易用的框架，擅長做通用的 DOM 處理。
如果你偶爾需要操作 DOM，那麼 D3 將滿足你的需求，並且無須掌握其他框架和 API 來編寫網頁。該庫的設計也很巧妙，作為一個模型，它提供了“開箱即用”的功能來處理常見的資料操作和視覺化任務。
說了這麼多，其中最無可比擬的是 D3 是一種開放技術，使用者通過它可以創造無限的可能性。最棒的 D3 應用永遠在路上，你就是它的締造者。