fbpx

介紹 React 的 D3.js

了解如何在 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 開發的入門課程。在註冊本課程之前,學生應具備 Ja​​vaScript、HTML、CSS 和 React 程式設計經驗。

目標受眾

  • 想要盡快開始使用 D3 的 React 開發人員
  • 任何想了解“足夠的 D3 以避免危機”的人

講師簡介

Adam Janes 資料視覺化工程師

你好! 我的名字是 Adam,我是來自英國的 Web 開發人員。 我在哈佛大學學習經濟學和計算機科學,我熱衷於修補有趣的資料源。

我的工作涉及幫助公司改進向用戶顯示資料的方式。 從小型 SaaS 公司到大型非政府組織,我利用我在資料視覺化方面的專業知識為一系列客戶提供設計指導和技術幫助。

我希望很快能在我的一門課程中見到你。

英文字幕:有

  • 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

報名參加課程

Sponsored by Udemy


🛫使用關鍵字連結獲得更多線上學習資訊?請參考這個網頁說明



追蹤 Soft & Share

✍ 不受社群推薦演算法影響,建議 Telegram/Discord/e-mail

幫我們個小忙!

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: