前言

從今天開始的文章就正式進入 D3 的圖表繪製設定了，光最基本的輸入輸出區域就花了不少篇幅說明 (其實是為了拖台錢讓鐵人賽更容易完賽XD) ，總之接下來的文章可能就會比前幾天的文章還困難一點，大家一起加油努力學起來吧！

svg

首先還是要介紹一下 svg ， svg 是所有 D3 圖表中的基本，一開始我們必須要初始化一個 svg 的元素，這樣我們才能在 svg 內設定自己想要的圖表，簡單來說 svg 扮演的角色就是一個容器來讓我們裝入自己想產生的圖表，如果對於 svg 有任何不懂的歡迎先回去複習前幾天筆者寫過的文章，接下來所有的 API 都會跟 svg 的設定有關，所以 svg 的觀念真的要好好的記住XD

select

看到 select 應該就知道是負責選取什麼東西，沒錯 d3.select() 就是負責選取，那要選取什麼東西呢？其實 D3 可以選取的東西有兩種，一種是 selector 另一種是 node 非常的彈性，接下來就來說明一下兩者的寫法吧！

• selector

  其實 selector 很簡單，就是利用 CSS selector 的方式來取得元素，所以寫法就跟以前在寫 jQuery 的時候很像，只是把 $ 改成 d3.select() 而已。

• node

  node 就相對的複雜一點，因為要透過一些 DOM 的操作來取得 node ，像是 document.body 等等，這邊有個重要觀念是假如要利用 node 當作 d3.select 的參數，必須要確保這個 node 具有唯一性，因為使用這個方法時 D3 並不會遍歷整個 DOM ，這邊讀者要特別留意一下。

  至於 DOM 操作的方法筆者推薦用 document.querySelector() 的方式來取得元素，由於 document.querySelector() 取得的會是一個 NodeList 而 NodeList 能接受的東西會比用 document.getElementById() 取得的 HTMLCollection 來的多很多，為了確保之後的設定值都可以順利地寫入，所以筆者就推薦用 document.querySelector() 了。

接下來就用個簡單的範例碼來演繹一下 d3.select() 的運作吧！

const selectedNode = d3.select('body')

append

append 顧名思義就是添加的意思，在 d3.append() 中就是負責新增 Node 的 API ，這邊讀者要記住一點，一定要先選取過後才可以進行添加 Node 的動作，不然 D3 也不知道要把這個 Node 新增在哪邊對吧XD

d3.append() 相較 d3.select() 就單純很多了，只要考慮要添加什麼 Node 進去就好，寫法如下：

const selectedNode = d3.select('body')
const appendNode = selectedNode.append('svg')

attr

一開始看到 attr 可能還想不出來這是做什麼用的，其實 attr 就是 attribute 的縮寫啦！所以 d3.attr() 就是負責替這個 Node 添加 attribute 的 API ， d3.attr() 一共會帶兩個參數，順序為： attributeName 以及 attributeValue

相信聰明的你一定也知道這個要擺在 d3.select() 之後了，至於需不需要擺在 d3.append() 之前就看各位要怎麼設定了，但通常都會擺在 d3.append() 之後，畢竟已經存在於 DOM 中的 Node 早就利用 CSS 進行樣式的修改了對吧XD

const selectedNode = d3.select('body')
const appendNode = selectedNode.append('svg')
const attrNode = appendNode.attr('width', 300)

綜合上述 API

其實 JS 有個功能，就是可以多個 API 進行串接，讓上一個 API 處理完的東西傳遞給下一個 API 用，之後再回傳最終結果，這邊用個例子來說明：

const newData = originData
  .map(data => data * 2)
  .filter(el => el < 10)

其實 D3 也是一樣，由於 D3 有非常多的 API ，如果不直接進行 API 的串接那肯定是要設定很多變數很浪費空間，所以之後筆者的範例碼都會把 API 串接起來，接下來就把上面所講的 API 進行串接來初始化一個 svg 元素吧！

const width = 300
const height = 300

const svg = d3
  .select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height)

上面這段的意思就是我初始化一個叫 svg 的變數，這個變數的功能就是在 body 內新增一個 svg 的節點，這個 svg 的寬跟高為 300px ，之後就可以利用這個 svg 變數進行後續的圖表操作了。

總結

今天介紹了不少東西不曉得讀者會不會覺得太難吸收呢？其實寫 JS 久了相信大家都會覺得 D3 的 API 命名好像 jQuery，當初筆者就是用 jQuery 的方式來思考這些 API ，從這個角度下去學習之後就會發現其實 D3 也沒有想像中的那麼難了XD

如果對於文章有任何問題歡迎在下面留言給我，沒問題的話明天要來開始進行 svg 內圖表的操作了。