1 介紹
D3 (或者叫 D3.js )是一個基于 web 標準的 JavaScript 可視化庫. D3 可以借助 SVG, Canvas 以及HTML 將你的資料生動的展現出來. D3 結合了強大的可視化互動技術以及資料驅動 DOM 的技術,讓你可以借助于現代瀏覽器的強大功能自由的對資料進行可視化
學習了d3一個多月，通過繪制一些簡單的二維圖表，總算入門了d3，強烈推薦《D3資料可視化實戰手冊》，講的很清晰，我的部分圖表demo也是模仿它寫的，
每張圖表在繪制之前，首先需要在頁面上創建svg物件作為畫布，并預留一定的margin，因此為了方便，減少代碼的冗余，我定義了一個chart物件， 該物件具有一些內置的屬性和方法，不僅幫助我們在繪圖前快速地初始化畫布，而且還能快速的設定圖表的width，height和margin等屬性， 運用裁剪clip保證元素不超出畫布等，
chart物件原始碼請狠狠點擊這里
初始化后的畫布結構如圖， 之后的大部分圖表主體部分的繪制范圍都局限于body中
2 demo的代碼結構
大部分每張圖表都具有如下4個檔案，其中data.csv用于存盤源資料，index.css用于設定圖表的css樣式，index.html則是圖表所在的頁面，而index.js則是繪制圖表的關鍵代碼
index.html示例
index.css示例
data.csv示例
3 目錄
D3 二維圖表的繪制系列（二）基礎柱狀圖
D3 二維圖表的繪制系列（三）多列柱狀圖
D3 二維圖表的繪制系列（四）堆疊柱狀圖
D3 二維圖表的繪制系列（五）橫向柱狀圖
D3 二維圖表的繪制系列（六）基礎折線圖
D3 二維圖表的繪制系列（七）堆疊面積圖
D3 二維圖表的繪制系列（八）曲線圖
D3 二維圖表的繪制系列（九）基礎餅圖
D3 二維圖表的繪制系列（十）環狀餅圖
D3 二維圖表的繪制系列（十一）南丁格爾圖
D3 二維圖表的繪制系列（十二）基礎散點圖
D3 二維圖表的繪制系列（十三）多符號散點圖
D3 二維圖表的繪制系列（十四）氣泡圖
D3 二維圖表的繪制系列（十五）雷達圖
D3 二維圖表的繪制系列（十六）矩形樹狀圖
D3 二維圖表的繪制系列（十七）樹圖
D3 二維圖表的繪制系列（十八）漏斗圖
D3 二維圖表的繪制系列（十九）封閉圖
D3 二維圖表的繪制系列（二十）河流圖
D3 二維圖表的繪制系列（二十一）儀表盤圖
D3 二維圖表的繪制系列（二十二）桑基圖sankey
D3 二維圖表的繪制系列（二十三）旭日圖
D3 二維圖表的繪制系列（二十四）力導向圖
D3 二維圖表的繪制系列（二十五）中國地圖
D3 二維圖表的繪制系列（二十六）盒須圖
D3 二維圖表的繪制系列（二十七）日歷熱力圖
D3 二維圖表的繪制系列（二十八）關系圖-弦圖
D3 二維圖表的繪制系列（二十九）徑向樹圖
D3 二維圖表的繪制系列（三十）平行坐標系折線圖
D3 二維圖表的繪制系列（三十一）熱力地圖（heatMap.js）
D3 二維圖表的繪制系列（三十二）可縮放的封閉圖
D3 二維圖表的繪制系列（三十三）可縮放的矩形樹圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/1467.html
標籤：其他