iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

D3.js新手開發基本圖表 系列

身為一個從來沒寫過D3.js的前端工程師,為學習開發資料視覺化圖表,利用這次鐵人賽的機會當作自我挑戰。以阿貝拉(Andrew Abela)的圖表指南中將依據不同資料類型所歸類的21種圖表為目標,嘗試使用D3.js各別挑選獨立主題完成開發練習。

鐵人鍊成 | 共 30 篇文章 | 43 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day11 練習 - 直式長條圖(2)

昨天練習了繪製直式長條圖,使用enter()方法將元素加入svg當中;接著今天的練習是要假設圖表是可以重覆繪製的,所以來延續昨天的程式碼來實作更新圖表。 首先把...

2018-10-25 ‧ 由 Thunder 分享
DAY 12

Day12 練習 - 直式長條圖(3)

昨天將直式長條圖的更新繪制的部份完成了,今天主要是要再繼續延續做一點練習,將原本的程式碼做一點改寫練習。 一、取得常態分佈亂數 原本在取亂數的時候是使用java...

2018-10-26 ‧ 由 Thunder 分享
DAY 13

Day13 比例尺

在前一天最後一個練習當中有使用到線性比例尺來做直長條圖的高度換算,今天就針對比例尺的部份來做稍微詳細一點的說明。 在D3中比例尺(Scale)的應用是將一個區間...

2018-10-27 ‧ 由 Thunder 分享
DAY 14

Day14 座標軸

座標軸是圖表常見的組成之一,D3提供了座標軸的製作方式,可以省掉自己手刻svg的工。以下是一段基本的程式範例。 var svg = d3.select(&quo...

2018-10-28 ‧ 由 Thunder 分享
DAY 15

Day15 練習 - 散布圖 (1)

一、以比例尺繪制x,y軸座標軸 今天要來練習繪製一個具有兩個參數資料的散布圖圖表,這個散布圖將各別資料的兩個參數值放到x,y座軸上面畫出座標點。 這個範例資料集...

2018-10-29 ‧ 由 Thunder 分享
DAY 16

Day16 練習 - 散布圖 (2)

一、繪製具分隔線的刻度 為了來了解d3.svg.axis()其他的api用途,這邊要做一點變化,把原來的資料改成用百分比的方式來呈現。 比例尺做一點修改,把定義...

2018-10-30 ‧ 由 Thunder 分享
DAY 17

Day17 練習 - 散布圖 (3)

前一天已經完成了一個散布圖的練習繪製,今天延續原本的程式碼做一點變化。今天要完成的目標有兩個: 圖表繪製更新資料 資料更新時圖點要有動畫效果 一、圖...

2018-10-31 ‧ 由 Thunder 分享
DAY 18

Day18 繪製產生器 (1)

顏色 D3的顏色有RGB和HSL兩種方法,可以互相轉換。 d3.rgb(r,g,b) 以rgb作參數,範圍都為0~255 d3.rgb(color) 輸入顏色字...

2018-11-01 ‧ 由 Thunder 分享
DAY 19

Day19 繪製產生器 (2)

如果要自己手刻svg標籤來繪圖是非常辛苦的一件事情,D3提供了許多繪製的產生器可以幫助我們省下很多工,再來將挑出幾個做一些基本的說明。 一、線產生器 首先用D3...

2018-11-02 ‧ 由 Thunder 分享
DAY 20

Day20 繪製產生器 (3)

一、弧產生器 相關的方法 d3.svg.arc() 建立弧產生器,回傳可使用的函式 src.innterRadius() 內半徑 src.outerRadius...

2018-11-03 ‧ 由 Thunder 分享