iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 28
0
Modern Web

React + D3 的正確姿勢系列 第 28

Day28-React + D3(一)

前言

前面的文章都介紹完圖表的繪製後,今天終於要回歸主題,把 D3 跟 React 結合在一起了,今天跟明天的文章都會把以前所講的內容做一個統整,假如對 React 或 D3 不是很熟悉的,歡迎閱讀筆者之前的文章來幫助自己更了解這兩天文章的內容喔!

先備知識

俗話說的好:萬事起頭難,為了讓讀者們可以更快的結合 React 以及 D3 ,所以最簡單的方法就是直接把 D3 的圖表變成一個 React.Component ,要變成一個 React 元件並不難,只是這時候就要思考如何順利的繪製圖表,這時候就需要利用 Day04 所講的元件 life cycle method 了,而這邊會用到的是 componentDidMount

componentDidMount

透過 componentDidMount 我們就可以很順利的在 React 第一次繪製元件後進行其他的操作,簡單來說我們就是要利用這個特性把 D3 圖表的操作都直接利用 call function 的方式直接在 componentDidMount 內進行調用,這樣也不用修改到之前繪製圖表所寫的程式碼了,是不是非常的方便,其實只要是這種本身沒有支援 React 元件的 library 都可以利用 componentDidMount 來進行使用,所以不用擔心用了 React 後之前的程式碼就要重寫了,可以利用這種方式讓大家可以很快的移植程式碼,只是最後還是要稍微重構一下整體架構,不然程式碼看起來還是會又臭又長XD

繪製流程

接下來還是要介紹一下整體的繪製流程,首先就是要把圖表變成一個 React 元件,寫法如下:

import React, { Component } from 'react'

class BarChart extends Component {
  // ...
}

再來就是把之前寫在 index.html 中的內容填入 render() 內,記得 class 在 React 中要寫成 className 喔!整體寫法如下:

render() {
  return (
    <div>
      <div className="chart-title">
        <div className="mark" id="Google">
          <div className="google-mark circle" />
          Google
        </div>
        <div className="mark" id="Facebook">
          <div className="facebook-mark circle" />
          Facebook
        </div>
      </div>
      <div id="line" />
    </div>
  )
}

最後就是在 componentDidMount() 中調用之前寫好的 D3 程式碼啦!

import view from '../../../bar chart/view'

componentDidMount() {
  view.bar_chart('bar')
}

組合起來

最後筆者有把上面流程所講的程式碼都丟到 GitHub 上,有興趣想要參考的讀者歡迎上去參考這些範例碼。

react_d3_practice

總結

今天介紹了如何利用 componentDidMount() 的方式將 D3 順利地引用到 React 專案中,還記得筆者在一開始介紹 React 的時候有講到,其實也可以利用 React Hook 中的 useEffect() 來取代 componentDidMount() ,所以明天的文章就是要來介紹如何利用 React Hook 繪製 D3 圖表啦~

如果對於文章有任何問題歡迎在下面留言給我,沒問題的話明天要來介紹 React Hook 與 D3 的結合了。


上一篇
Day27-bubble chart(using D3.js)
下一篇
Day29-React + D3(二)
系列文
React + D3 的正確姿勢30

尚未有邦友留言

立即登入留言