前言

每週群內直播記錄.歡迎大家加入前端視覺化學習群.(2022/02/25)

what is D3js
D3js Design
D3js Source code
Q&A

---------

what is D3js? (什麼是D3js)

D3js is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.

D3js是一個JavaScript庫，用於使用web標準視覺化資料。D3幫助您使用SVG、畫布和HTML將資料帶入生活。D3將強大的視覺化和互動技術與資料驅動的DOM操作方法相結合，為您提供現代瀏覽器的全部功能，併為您的資料設計正確的視覺化介面。

下文D3js簡稱D3

D3js Design ? (D3js的設計)

D3的威名在業內可算是top級別的,很多庫也是學習借鑑了D3的某一個模組(甚至直接就拿過去用)。這個也是得益於D3設計的優勢。D3設計的原則就是最大程度的進行解耦。

canvas,svg 作為該庫的渲染API。
各個模組進行解耦,包含shape,selection等等...
- shape 離散的圖形形狀實現，例如符號、圓弧、直線和區域
- selection 選擇允許對文件物件模型 (DOM) 進行強大的資料驅動轉換：設定屬性、樣式、屬性、HTML或文字內容等
- time 一個計算人類特殊時間約定的計算器
- path 將畫布路徑命令序列化到SVG
- scale 將抽象資料對映到視覺表示的模組。
- zoom 使用滑鼠或觸控輸入平移和縮放SVG,HTML或canvas.
- force 彈性佈局演算法採用的四叉樹。(可參考我的其他文章)
- sankey 流向佈局演算法
- ...

基於各個模組的融合使用可以構建豐富的圖表。

D3js Source code (D3js 原始碼部分)

selection

對於append.js原始碼進行了解其實就是dom元素appendChild的操作。

對於classed.js原始碼進行了解其實就是每個元素class的集合管理

path

對於path.js原始碼進行了解,其實是對canvas2d的API進行了封裝。這個也是D3對於canvas2d支援的一個相容模組。

Q&A

A同學: 如何學習框架原始碼 ?

框架原始碼學習,一定是先有巨集觀認知,再去學習具體某一個模組程式碼。什麼是巨集觀認知,瞭解下框架的設計,背後的故事. 以及它是為了解決什麼問題出現。最直接有效的例子先去吧原始碼的目錄結構搞明白畫一個思維導圖進行分析。

視覺化學習一定要學習數學,圖形學嘛?

當你只是為了滿足日常需求開發,就不一定需要學。但是如果想學好後面想更深入的學習。那麼是的,需要學習。比如線性代數,矩陣等等。我後面會給大家推薦一些完整的學習書籍。

最後

視覺化相關的架構設計,原始碼學習，日常開發。我會逐步進行深入分享。如果對你有幫助請關注我後續的內容。有需要的同學可以加一下我的聯絡方式(在我的主頁,拉你進群聊)。

[live streaming] 一文看懂D3js的設計,學會如何閱讀原始碼。

前言