D3.js 資料視覺化工具(中)

延續上個章節,學習 SVG 製圖、 刻度 & 軸

Jacy Chu
7 min readJul 16, 2021

📝 回顧第一章節:D3.js 資料視覺化工具(上)
上個章節學習 D3.js 基礎概念。這章節將延續上個章節,深入學習 SVG 以及D3 刻度&軸!

📋 目錄

  1. D3 SVG 元件
  2. D3 SVG 圖表
  3. D3 刻度 & 軸 (Scales & Axes)

D3 SVG 元件

SVG (Scalable Vector Graphics) 是一種在網頁上呈現圖像的方法。 SVG 不是直接圖像,而是使用文本創建圖像的方法。它會根據瀏覽器的大小自行縮放,因此調整瀏覽器的大小不會使圖像失真,並提供繪製不同形狀,如線條、矩形、圓形、橢圓等。

💥 What is SVG?

SVG 是一種基於文本的圖像
SVG 在結構上類似於 HTML
SVG 位於 DOM 中
SVG 屬性可以指定為屬性
SVG 應該具有相對於原點的絕對位置 (0, 0)

開始學習 SVG 元素前,先看下方的範例,可以看到 SVG 元素被包在<svg> tag 裡面。

✒️ 線 Line

以<line>表示,下方為 HTML 中的寫法:
<line x1="15" y1="15" x2="200" y2="50" />
x1:第一個點的 x 坐標
y1:第一個點的 y 坐標
x2:第二個點的 x 坐標
y2:第二個點的 y 坐標

畫布是從左上方開始做計算的!

新增 js 檔案,並做好相關檔案配置,再輸入下方程式碼:

輸入完將原本 HTML 檔案中<svg> 整個區塊移除,此時開啟瀏覽器仍會得到一模一樣的作圖。

✒️ 矩形 Rectangle

以<rect>表示,下方為 HTML 中的寫法:
<rect x="0" y="0" width="200" height="200"></rect>
x:矩形左上角的 x 坐標
y:矩形左上角的 y 坐標
width:矩形的寬度
height:矩形的高度
將上方寫法改置於 js 檔案中,程式碼如下:

開啟瀏覽器,可以看到一個矩形(長100px,寬200px)

✒️ 圓形 Circle

以<circle>表示,下方為 HTML 中的寫法:
<circle cx="250" cy="25" r="25"/>
cx:圓心的 x 坐標
cy:圓心的y坐標
r:圓的半徑
將上方寫法改置於 js 檔案中,程式碼如下:

SVG 預設顏色為黑色

開啟瀏覽器,可以看到一個圓形(半徑50px)

✒️ 橢圓 Ellipse

以<ellipse>表示,下方為 HTML 中的寫法:
<ellipse cx="250" cy="25" rx="100" ry="25"/>
cx:圓心的 x 坐標
cy:圓心的y坐標
rx:圓的 x 半徑
ry:圓的 y 半徑
將上方寫法改置於 js 檔案中,程式碼如下:

SVG 預設顏色為黑色

開啟瀏覽器,可以看到一個橢圓形 👀

🔧 制定 SVG 元件樣式

fill
元素的填充顏色,可以是顏色名稱、十六進制值或 RGB 或 RGBA 值
stroke
筆觸顏色,可以是顏色名稱、十六進制值或 RGB 或 RGBA 值
stroke-width
筆觸寬度指定我們的線條或邊界的寬度(以像素為單位)
opacity
指定一個不透明度/透明度數字(0 是完全透明,1 是完全不透明)
font-family
對於文本元素,用法與 CSS 一樣
font-size
指定文本元素的字體大小

D3 SVG 圖表

運用上方的 SVG 元素以及 <text>繪製圖表,進到 D3 SVG 範例之前,先看純 HTML 搭配 CSS的寫法。

📍 SVG 圖表(不採用 D3 寫法)
建立一個新的 HTML 檔案,並加上下方程式碼:

開啟瀏覽器,可以看到上方 SVG 長條圖。
查看上方程式碼,有三個<g>標籤,g 代表 group 的縮寫。由於 SVG 採用相對於原點的絕對位置, (0, 0) 從屏幕左上角開始計算。為了讓三個 bar 不重疊呈現,故加上 transform="translate(0,xx)"做調整。

📍 SVG 圖表(採用 D3 寫法)
若將上方範例,改用 D3.js 寫法。
此時 HTML 檔案如下:

js 檔案程式碼如下:

最上方 data array 定義資料內容,因為資料值偏小故用 scaleFactor 輔助,
讓呈現出來的資料便於閱讀。graph 部分設定 svg 的大小,由於長條圖長橫的,高度設定為 bar 資料長度。
往下 bar 部分,設定<g>標籤,為了讓三個 bar 不重疊呈現,所以加上 transform="translate(0,xx)"做調整,function(d,i) d 代表資料,i 代表 index。設定好要繪製的位置,接著繪製<rect>,其中 height 設定的 -1 是作為 margin 用途。最後標上<text>,style text-anchor:end 將 x 位置設定靠齊 bar 的最右方,y 的部分則是 bar 高度的一半,dy 設定 y 的邊界偏移量。

D3 刻度 & 軸 (Scales & Axes)

D3 Scales

有些數據的值太大或太小,不便於直接呈現在圖表中,D3 Scales 可以協助縮放單位,讓資料視覺映射有較好的呈現。

在進到 scale 之前,必須先認識 Domain & Range。
Domain:表示輸入數據的最小值和最大值。
E.g. arr=[100, 400, 300, 900, 850, 1000] ,100 是最小值,1000 是最大值。Range:範圍是使用者期望輸入值映射到的輸出範圍。
E.g. 想在 500px 像素寬度呈現最大值 1000,縮放因子即為 0.5。

d3.scaleLinear() 常見的 scale 輔助工具

d3.scaleLinear() 舉例說明

假設有筆資料 data =[100, 400, 300, 900, 850, 1000],使用d3.scaleLinear() 如下:

若輸入 400,則會對應到 200。其中的 domain 可以使用 d3.min() & d3.max() 取得,修改如下:

完整 D3 Scale 範例如下:

開啟瀏覽器,畫面如下:

🔖 補充說明
d3.scaleBand() 非連續性的比例尺,適用於非連續性質的資料。
d3.scaleLinear() 連續性的比例尺,適用於連續性質的資料。

詳細 D3 Scale 資料可以參閱說明 🔍

D3 Axes

繪製圖表軸線,需設定 x & y。

d3.axisTop()
創建頂部水平軸
d3.axisRight()
創建垂直向右的軸
d3.axisBottom()
創建底部水平軸
d3.axisLeft()
創建垂直向左的軸

詳細範例如下:

成果如上圖所示。詳細 D3 Axes 資料可以參閱說明 🔍

具備 SVG 以及繪製軸線的基礎,在最後一個章節將繪製各類統計圖表!

🚪 前往下一章節:D3.js 資料視覺化工具(下)

Figure it out! 📊

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Jacy Chu
Jacy Chu

Written by Jacy Chu

Front End Developer | 📍Taipei

No responses yet

What are your thoughts?