Web 繪圖技術 - SVG & D3
過去在網頁上描繪各種圖形或是統計圖表不是一件容易的事，對於一些簡單的圖形（例如長條圖）僅能透過 DOM 進行實作，如果要進一步的視覺效果則必須依賴其它的外掛程式，例如 Flash。
HTML5 導入了額外的 Canvas, SVG 元等素支援繪圖功能，當你需要將數字資料視覺化時，可以透過 這些新的元素進行實作，Canvas, SVG 是相當基礎的標籤，對於高度複雜且具美觀要求的圖形描繪，依然須進一步撰寫大量的 JavaScript 完成實踐。
SVG 是一種向量圖形，為了避免撰寫大量處理圖形的 JavaScript 程式碼，我們可以利用D3.js來處理 SVG 之類的向量圖形內容，將以下這一行嵌入網頁的 head 標籤中即可開始使用 D3。
D3 Gallery 提供了大量透過D3實作的圖表作品，想體驗D3在網頁上呈現的視覺效果，可以瀏覽這個範例集散網頁。
這套課程將陸續提供以下的教學內容，說明 D3 的使用說明與圖表實作示範。
過去在網頁上描繪各種圖形或是統計圖表不是一件容易的事，對於一些簡單的圖形（例如長條圖）僅能透過 DOM 進行實作，如果要進一步的視覺效果則必須依賴其它的外掛程式，例如 Flash。
HTML5 導入了額外的 Canvas, SVG 元等素支援繪圖功能，當你需要將數字資料視覺化時，可以透過 這些新的元素進行實作，Canvas, SVG 是相當基礎的標籤，對於高度複雜且具美觀要求的圖形描繪，依然須進一步撰寫大量的 JavaScript 完成實踐。
SVG 是一種向量圖形，為了避免撰寫大量處理圖形的 JavaScript 程式碼，我們可以利用D3.js來處理 SVG 之類的向量圖形內容，將以下這一行嵌入網頁的 head 標籤中即可開始使用 D3。
<script src="https://d3js.org/d3.v5.min.js"></script>
D3 Gallery 提供了大量透過D3實作的圖表作品，想體驗D3在網頁上呈現的視覺效果，可以瀏覽這個範例集散網頁。
這套課程將陸續提供以下的教學內容，說明 D3 的使用說明與圖表實作示範。
沒有留言:
張貼留言