Contents
了解如何在 React 環境中使用 D3.js（版本 6.x）。 學得足夠的 D3 知識以避免危機，並儘快開始使用 D3。
從這 5.5 小時的課程，你會學到
- 了解 D3 的基本建構塊
- 了解 SVG 的工作原理，以及如何使用 D3 操作它們
- 為一起使用 React 和 D3 設定工作檔案架構
- 在 React 組件和 D3 之間傳遞事件
- 建構對用戶輸入做出反應的更新圖表
要求
- 學生應該對 HTML、CSS 和 JavaScript 有很好的理解
- 學生應該已經熟悉 React 程式設計
課程說明
歡迎使用介紹 React 的 D3.js！
本課程將幫助你盡快在 React 環境中啟動和運行 D3.js。 本課程將教你使用最新版本的 D3 – 6.x 版進行程式設計。
課程大綱
該課程以程式碼格式建構，在 5 個部分的課程中逐漸增加了你可運用 D3 程式庫來執行。
第 1 節：
- 告訴你為什麼要學習 D3
- 回顧課程結構
- 解釋課程資源
第 2 節：
- 完成環境設定
- 建一個包裝器以同時使用 React 和 D3
- 介紹 SVG
- 在 D3 中邁出第一步
第 3 節：
- 使用 D3 建構靜態條形圖
- 如何在圖表中添加比例尺和維度軸
- 介紹 D3 維度軸產生器
- 添加 D3 邊距約定
第 4 節：
- 使用 D3 建構更新條形圖
- D3 區間法介紹
- 使用 D3 過渡套件
- 了解 D3 通用更新模式
- 經由 React 根據用戶輸入更新圖表
第 5 節：
- 使用 React 和 D3 構建完整的 Web 應用程式
- 使用 D3 構建散點圖
- 處理 React 和 D3 之間的事件
- 一起練習使用這兩個程式庫
我應該參加這門課程嗎？
D3 是一個非常強大的程式庫，其強大的開發者社區每天都在增長。眾所周知，該庫不能很好地與 React 一起使用，因為它們都希望完全控制 DOM。如果你想學習將這兩個程式庫放在一起並儘快啟動和運行的正確方法，請參加本課程。
本課程不是 Web 開發的入門課程。在註冊本課程之前，學生應具備 JavaScript、HTML、CSS 和 React 程式設計經驗。
目標受眾
- 想要盡快開始使用 D3 的 React 開發人員
- 任何想了解“足夠的 D3 以避免危機”的人
講師簡介
Adam Janes 資料視覺化工程師
你好！ 我的名字是 Adam，我是來自英國的 Web 開發人員。 我在哈佛大學學習經濟學和計算機科學，我熱衷於修補有趣的資料源。
我的工作涉及幫助公司改進向用戶顯示資料的方式。 從小型 SaaS 公司到大型非政府組織，我利用我在資料視覺化方面的專業知識為一系列客戶提供設計指導和技術幫助。
我希望很快能在我的一門課程中見到你。
英文字幕：有
- 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To
🙌 如何有效率地管理 ChatGPT 輸出與整理自己的 ChatGPT 提示( prompts )使用情境？LN+ for Web 已經針對 ChatGPT 的整合做最佳化
🙌 讓 Notion AI 成為你線上學習的得力助手，詳細操作請參考 – 使用 Notion AI 功能來為 udemy 的課程做摘要總結
- 點選這個✨優惠連結 課程特價 | Udemy 永久擁有課程 NT370 起( 請登入 Udemy｜按過“優惠連結”後到”報名參加課程“連結網頁做更新 ）
- Udemy 現在越來越多課程有中文字幕，請參考 Soft & Share 中文線上課程
- 手機上點選優惠連結看到的價格比電腦上看到的貴
- ＄代表當地貨幣, 如在台灣為 NT
- 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上，請稍等刷新或重新點選就會出現
報名參加課程
你必須登入才能發表留言。