iT邦幫忙

鐵人檔案

2018 iT 邦幫忙鐵人賽
回列表
Data Technology

讓你資料美美的(d3.js+vue.js) 系列

分別學習vue.js與d3.js寫成筆記 並且嘗試將兩者混合使用

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

D3動起來

CSS有transition可以完成簡單的動畫D3也有transition,而且比CSS的控制要簡單一些,功能強大一些,可以加入更多自己想要的效果來將之前的長條...

2018-01-09 ‧ 由 方威 分享
DAY 22

D3繼續動起來

tween 補間動畫 補間動畫是指在兩個畫面轉換時的動畫,也就是讓動畫動起來的角色,簡單說就是過場 在D3中的transition除了提供基本的預設補間動畫之...

2018-01-10 ‧ 由 方威 分享
DAY 23

D3來點互動吧

最近,資料視覺化已經不單單是把圖表畫出來,常常會被要求要能夠更吸睛,最好還要好玩,所以互動性就變成了重要的一環。 on 在d3中要監聽滑鼠、鍵盤、觸控等等事件...

2018-01-11 ‧ 由 方威 分享
DAY 24

D3這邊可以再多一點互動嗎?

這次要再增強一點互動性 drag 有時候就是會想要把東西拉來拉去啦!在d3中,如果想要拖拉物件可以使用drag來達成drag分為三個事件(階段) start...

2018-01-12 ‧ 由 方威 分享
DAY 25

D3圓餅圖

圓餅圖 在繪製圓餅圖時,須先將角度,位置計算好,再一個一個慢慢對位而在d3中只要幾個步驟就可以將這些事情做好做滿 pie 首先要將資料轉換成圓餅圖所需的資料,在...

2018-01-13 ‧ 由 方威 分享
DAY 26

D3 force

Force-Directed 不知道這種圖有沒有正式的中文名稱?這個圖可以用來表達點與點之間的關係 畫Force-Drected graph需要使用d3中的力...

2018-01-14 ‧ 由 方威 分享
DAY 27

D3 tree

樹狀圖 利用tree來繪製樹狀圖,樹狀圖可以用來表達資料中的階層關係利用d3繪製樹狀圖之前,需要先將資料整理成json的格式,並且依照規定用name及child...

2018-01-15 ‧ 由 方威 分享
DAY 28

d3+vue 愛逮丸啦

d3 + vue 這次想結合d3及vue來做一個跟台灣有關的東西 先來產生畫台灣地圖所需要的檔案GeoJSON,可以利用一個nodejs的套件(shapefil...

2018-01-16 ‧ 由 方威 分享
DAY 29

d3+vue 愛逮丸啦2

昨天把地圖檔(GeoJSON)準備好了! 這邊分享給有需要的人 d3.geo 今天就要來把逮丸畫出來!要畫出來其實並不算困難,但是要調整滿久的... 投影 繪...

2018-01-17 ‧ 由 方威 分享
DAY 30

d3+vue 愛逮丸啦3

d3 + vue 一開始訂下這個題目,是希望能夠將兩者整合應用,來做個嘗試吧 這次把d3寫到vue之中,利用vue來讀取檔案,並且將部分的設定值寫在vue的d...

2018-01-18 ‧ 由 方威 分享