31 docs tagged with "ithome"

2018年參加 「iThome鐵人賽」所寫的系列文章 - D3.js新手開發基本圖表

一、本系列介紹及範圍

一、關於學習筆記

一、圖表結構

一、Canvas和SVG

一、文字

一、hello world

一、基本理解

一、資料綁定(Data-Join)的data()

D3.js的學習對我來說是比較抽象一點，所以我一開始的學習策略，就打算一開始只學習比較基本的觀念和函式的操作，接著就直接找練習題實作邊做邊學。

一、使用``元素繪製長條圖

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

昨天將直式長條圖的更新繪制的部份完成了，今天主要是要再繼續延續做一點練習，將原本的程式碼做一點改寫練習。

在前一天最後一個練習當中有使用到線性比例尺來做直長條圖的高度換算，今天就針對比例尺的部份來做稍微詳細一點的說明。

座標軸是圖表常見的組成之一，D3提供了座標軸的製作方式，可以省掉自己手刻svg的工。以下是一段基本的程式範例。

一、以比例尺繪制x,y軸座標軸

一、繪製具分隔線的刻度

前一天已經完成了一個散布圖的練習繪製，今天延續原本的程式碼做一點變化。今天要完成的目標有兩個：

顏色

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

一、弧產生器

一、使用線產生器繪製線圖

一、過渡(transition)

一、內插 (interpolate)

一、使用版面配置(Layout)畫出圓餅圖

一、繪製座標改以圖表本身作為起始點

一、圓餅圖layout繪製角度

一、監聽器

一、條直方圖(Column Histogram)繪製

一、使用線性比例尺繪製刻度

最後一篇就沒有額外準備新的學習進度了，整理一下我個人的學習心得。