Learn-D3
因為中文教程比較少, 特定建立了一個d3相關學習(含demo)的中文倉庫
分享内容:
- D3内部子產品的深入講解 有一個系統整體認知
- Analysis- examples 分析場景的例子
- Observable D3團隊分享示例的環境介紹
第一點作為重點, 本系列會完整涵蓋 D3 概念, 比如:選擇、連接配接、資料請求、縮放函數、事件處理和轉換。
D3-Introduction
D3.js是一個 JavaScript 庫，用于在 Web 上建立定制的互動式圖表。
D3全稱 Data-Driven Documents 3個D開頭的單詞也是它D3簡寫的由來。
大多數圖表庫（例如:Echarts）提供的都是現成的圖表，而 D3 由很多基礎建構塊組成，可以使用這些建構塊建構自定義圖表或地圖。
在codepen中嘗試編輯上面示例
使用
echarts.js
建立上面的條形圖隻需幾行代碼,
但是使用D3 建立上面的圖表就會複雜一些，因為它提供的方法更底層 (粒度更細一些)。并且需要有一些JavaScript, HTML, SVG和 CSS.的經驗。
如果我們的需求隻是标準條形圖、折線圖或餅圖，應該考慮使用
Echarts
等庫。但是，如果需要定制圖表或有非常精确的需求，則應考慮
D3js
。
D3 的優勢 功能到底有哪些？
- 非常受歡迎(上億次的下載下傳和上10萬的star),社群活躍 有大量開發的資源( D3團隊釋出為主)。
- 超級靈活, 專注于圖表組合的基礎元素,例如
scales
shapes
- 提供資料驅動修改HTML 和 SVG 元素 。
- 各種标準資料加載 資料處理（例如 CSV 資料）。
- 生成複雜圖表的助手，例如樹形圖、網絡圖。
- 在不同圖表狀态之間制作動畫的強大轉換效果。(非常多的内置函數)
- 強大的使用者互動支援，包括平移、縮放和拖動。
D3 内部到底有哪些子產品？
上面就是
D3
所有的
repositories
(倉庫), 大概分為幾類:
- 經常使用的, 基礎的(帶五角星的,本系列也會講解)。例如:
shapes
selection
- 工具類的 例如:
time format timer
- 廢棄的 很長時間不更新的。
bundler request
注意本系列不會涉及到源碼的講解。 後續如果有需要會補充。
本系列contents(内容)
上面就是本系列内容的大綱, 簡單拿幾個展開說說:
Selection & data joins
Selection
支援以資料驅動的方式添加、删除和修改
HTML
和
SVG
元素。。包含了非常多函數對元素的處理，例如:
selecting Elements
,
modifying Elements
...
data joins
支援将資料與元素進行綁定(也就是資料連接配接)。
都是D3的基礎子產品。
data requests
可以幫助從給定的 URL 請求檔案并将檔案資料轉換為 JavaScript 數組 例如(CSV)。使得後面處理真實資料變得非常容易。
支援CSV JSON TXT非常多的格式。
force layout
通過特定實體規則模拟，幫助我們特定方式展示元素資訊。提供現成的内置力函數,并且支援拓展。
transitions
transitions
可以在不同圖表狀态平滑轉換,制作動畫。例如，有一些
circle
元素, 當使用者點選
update data
時 平滑過渡到新的坐标位置。為圖表增加了視覺吸引力。