前言

今天的內容會比較輕鬆一些，前幾天的文章內容可能有點太多而且不太好消化，所以今天筆者就打算講一點輕鬆的內容，但這個內容也是非常重要的，想要把一張圖表繪製好這個小技巧一定不能少，今天要教的就是如何利用 transform 這個 CSS 把圖表可以順利的把資訊都顯示出來。

margin

margin 這個 CSS 相信大家都很熟悉，如果不熟悉的歡迎閱讀筆者在去年鐵人賽寫過的文章來稍微加深一下自己對於 margin 的觀念： Day11-HTML元素邊界關係！margin、padding、border ，不過今天的文章跟 margin 比較沒有太大的關係，因為要使用的並不是 margin 這個 CSS ，所以前面的文字純粹是要工商一下筆者之前寫過的文章而已(誤)

雖然今天的文章不會用到 margin 這個 CSS ，可是會用到 margin 的觀念，這樣我們才能順利地利用其他的 CSS 來進行圖表的畫面調整，之所以不用 margin 的原因是因為使用 margin 進行圖表的調整會經過 重構 這段過程，如果對於重構或重繪比較不懂的讀者歡迎閱讀筆者之前的文章來加深自己的印象。

Day03-virtual DOM

這樣就會拖垮網頁的效能，但筆者我又想讓 margin 有點存在感，這時候我就會設定一個物件並命名為 margin ，裡面就存放一些 margin 的設定值，像底下這樣：

const margin = { top: 25, right: 25, bottom: 25, left: 25 }

這樣設定有甚麼好處呢？接下來下面一段就會為大家揭曉這個好處。

transform

其實上面 margin 的設定都是為了替 transform 這個 CSS 鋪路，需透過 transform: translate() 的方式來進行圖表的平移，之所以利用 transform 這個 CSS 的原因是因為 transform 並不會進行 重構 只會進行 重繪 而已，可能有些讀者對於 transform 這個 CSS 比較不熟悉，這邊筆者稍微講一下 transform 後面可以接的 value 吧！

• matrix

  matrix 這個 value 比較弔詭一點，是根據數學的變換矩陣來進行變形的，雖然筆者是資工系出身但筆者數學真的不太好，所以這邊就沒辦法解釋是如何透過這些數學運算式來進行變形的，在撰寫 matrix 的參數時需要帶入 6 個參數進行變形，整體寫法如下： transform: matrix(1, 2, 3, 4, 5, 6) 。

• translate

  將元素進行平移，透過調整 x 與 y 的數值來進行平移，平移方向會根據 x 軸以及 y 軸進行平移，整體寫法如下： transform: translate(x, y) 。

• scale

  將元素進行縮放，透過調整 x 與 y 的數值來進行縮放，縮放方向會根據 x 軸以及 y 軸進行平移，整體寫法如下： transform: scale(x, y) 。

• rotate

  將元素進行旋轉，傳入的參數必須要是角度，例如： 30deg 代表順時針旋轉 30 度、 -30deg 代表逆時針旋轉 30 度，整體寫法如下： transform: rotate(30deg) 。

• skew

  將元素進行傾斜，透過調整 x 與 y 的數值來進行傾斜，這邊的數值都必須要填寫角度，這樣才能進行傾斜，整體寫法如下： transform: skew(30deg, -0.5deg) 。

MDN 自己有針對 transform 這個屬性提供線上 DEMO 的服務，想要玩玩看 transform 變形的讀者可以點選這個網址進行測試。

未加 transform 的圖表

看起來圖表被切掉了，這時候就必須要用到平移的方式把圖表完整的顯示出來。

加了 transform 的圖表

太好了！看起來一切都很正常了。

結合之前的設定

最後結合以前所教的設定來正式的把初始化 svg 的過程寫完吧！整體寫法如下：

const margin = { top: 25, right: 25, bottom: 25, left: 25 }
cosnt width = 300
const height = 300

const svg = d3
  .select('body')
  .append('svg')
  .attr('width', width - margin.left - margin.right)
  .attr('height', height - margin.top - margin.bottom)
  .append('g')
  .attr('transform', `translate(${margin.left}, ${margin.top})`)

可能會有讀者覺得奇怪怎麼這邊加了一個 group 的元素，其實道理很簡單因為今天要平移的是 svg 內全部的圖表，大家可以想想看假如我今天只有平移外層的 svg 容器但內層的圖表卻沒有平移，這樣一定無法完整顯示全部的圖表，所以在平移的時候都會平移內層的圖表，外層只需要當作容器進行擺放而已，所以這邊用個 group 包起來，這樣底下的圖表也都可以吃到這個 group 的設定了。

總結

今天的內容相對來說算比較輕鬆的，畢竟 D3 基本上需要學習的內容都在前幾天的文章教完了，但今天的內容也很重要，想把一張圖表繪製好就不能忽略這個小知識。

如果對於今天的文章有任何不懂歡迎在下面留言，沒問題的話明天就要來正式的繪製圖表嘍~