iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

三十天成為D3.js v7 好手 系列

是不是覺得用D3.js 畫圖表很酷炫但也很難學呢?想好好學卻發現官方文件看不懂嗎?網路上別人教學的程式碼搬過來卻跑不動嗎?版本變化太快,找不到最新版的教學嗎?現在不用擔心了,這系列通通幫你解決!

本系列使用目前D3.js最新版v7,並從最基礎的D3核心概念開始講解。帶大家了解DOM、JS Event、CSS selection、SVG的原理,以及D3.js 選取與資料綁定的核心;接著一路帶到 D3.js 繁多如麻的API講解,以及要如何看懂官方文件去找到 API 的使用方法;最後則把常見的圖表全帶大家手把手寫一次,並加上圖表動畫~讓你之後畫圖表不求人!

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

Day1-前言:三十天成為D3好手

本篇大綱: 為何選此主題 為何不使用框架 這三十天要講的大綱 Github 程式碼與 Github Page 為何會選 D3.js 這個主題 磨了好久終...

2021-09-13 ‧ 由 金金 分享
DAY 2

Day2-D3基礎介紹

輕鬆的前言看完了,今天我們就來正式進入D3的世界吧! 本篇大綱: 基礎介紹與運作原理、使用目的/優缺點、版本變化、酷炫D3網站、推薦閱讀與參考資源(含官方文件...

2021-09-14 ‧ 由 金金 分享
DAY 3

Day3-認識 SVG

本篇大綱:DOM 元素、SVG 重點概述、SVG 形狀/線條/路徑/文字、SVG樣式 上一章有提過在學習D3之前需要具備的知識,這邊就來講解其中最重要的一點...

2021-09-15 ‧ 由 金金 分享
DAY 4

Day4- D3選取器:Selection

本篇大綱:selection 重點概述、selection 提供的 API、selection 調整元素樣式、selection 增減元素 上一章講完 SV...

2021-09-16 ‧ 由 金金 分享
DAY 5

Day5-D3 資料綁定 Data Binding:data( ) 跟 datum( )

本篇大綱:Joining Data、綁定 DOM 元素跟資料的方法、data 跟 datum 的比較、何時該用 data / datum 上一章講解完 D3...

2021-09-17 ‧ 由 金金 分享
DAY 6

Day6-D3 資料綁訂 Data Binding: 資料狀態enter、update、exit

本篇大綱:Enter / Update / Exit 狀態、增減資料數量與DOM元素不匹配的方法、神奇的d 今天要來講資料綁定的第二個部分:根據資料與 DO...

2021-09-18 ‧ 由 金金 分享
DAY 7

Day7-D3 不同格式檔資料匯入的API

本篇大綱:Fetch 檔案的 API 們:d3.json( )、d3.csv( )、d3.tsv( )、d3.dsv( ) 今天我們要來看到 D3 的另外一...

2021-09-19 ‧ 由 金金 分享
DAY 8

Day8-D3 資料整理的API們:Array、Time Formats、Number Formats、Random

整理資料的API們:Array、Time Formats、Number Formats、Random 上一篇介紹完怎麼取得不同格式的資料後,接著要來看的是:...

2021-09-20 ‧ 由 金金 分享
DAY 9

Day9-D3繪圖:繪製形狀的Helper Functions

本篇大綱:Generator、Component、Layout 截至目前,我們已經學會 D3 如何將資料與DOM 元素綁定來呈現資料視覺化,也知道要怎麼將資...

2021-09-21 ‧ 由 金金 分享
DAY 10

Day10-D3 Transition 動畫

本篇大綱:transition( ) 移動、變換顏色、transition.delay( )、transition.ease( )、transition.o...

2021-09-22 ‧ 由 金金 分享