前言

前面的文章都介紹完圖表的繪製後，今天終於要回歸主題，把 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 的結合了。