D3.js - 基本功能介紹 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

D3.js - 基本功能介紹

d3.js javascript

Ares 2019-10-16 23:00:58 ‧ 1267 瀏覽

D3.js（Data-Driven Documents）是一個 JavaScript 的 Library，顧名思義是使用資料驅動文件，它可以操縱 DOM 元素，並讓其做圖像化的呈現，我們通常使用它來操控 SVG 元素以製作精美的圖表，而其寫法相當類似於 jQuery，直接使用 d3 這個物件的方法，之後以 . 進行串接，如下

d3.selectAll('p').text('我愛 How 哥，How 哥 No.1')
// 執行後會將所有 p 元素內容改為 "我愛 How 哥，How 哥 No.1"

安裝可使用 npm 或是 CDN 的方式，我們為了方便就直接使用 CDN 啦~

<script src="https://d3js.org/d3.v5.min.js"></script>

基本上 D3.js 主要可分為三個步驟，以下我們一一介紹

選取元素
綁定資料
繪製畫面

選取元素

選取元素常用的方法有兩種，分別為單選與多選

select：選取單一選擇器，類似 querySelector
selectAll：選取多個選擇器，類似 querySelectorAll

綁定資料與獲取資料

這邊常用的方法也分為兩種，分別為單一資料或一組資料，若不帶入參數可用於資料的獲取，帶入參數則用於資料的綁定

data：將元素依序綁定資料，通常一組資料（陣列）
datum：將每一個元素綁定單一資料，通常單一資料（字串、數字等）

範例 - datum

這邊每一個 p 段落都被換成傳入的參數了，並且可以看到綁定的資料皆相同

<body>
  <p>我是第一段文字</p>
  <p>我是第二段文字</p>
  <p>我是第三段文字</p>
  <p>我是第四段文字</p>
<script>
  const data = '我愛 How 哥，How 哥 No.1'
  d3.selectAll('p').datum(data).text(item => item)
  console.log(d3.selectAll('p').datum())
</script>
</body>

dataum範例

範例 - data

這邊會依序傳入資料，若元素大於資料，後面的元素將不變動

<body>
  <p>我是第一段文字</p>
  <p>我是第二段文字</p>
  <p>我是第三段文字</p>
  <p>我是第四段文字</p>
<script>
  const data = ['我愛 How 哥', 'How 哥 No.1']
  d3.selectAll('p').data(data).text(item => item)
  console.log(d3.selectAll('p').data())
</script>
</body>

data範例

資料狀態

資料綁定後分為三個狀態，分別為 update、enter 跟 exit

update：預設選項，選取已更新資料的元素
enter：資料 > 元素時使用，選取多出來的資料
exit：元素 > 資料時使用，選取多餘的元素

範例 - enter

這邊第一段與第二段文字有配對到資料，所以狀態皆為 update，而多出來的資料，也就是 How 哥 與 No.1 的部分，他們狀態皆為 enter，所以我們可以將其選取，並插入元素讓資料可以顯示於畫面

<body>
  <p>我是第一段文字</p>
  <p>我是第二段文字</p>
<script>
  const data = ['我愛', 'How 哥', 'How 哥', 'No.1']
  d3.selectAll('p').data(data).text(item => item)
  d3.select('body').selectAll('p').data(data).enter().append('p').text(item => item)
</script>
</body>

enter範例

範例 - exit

第一段與第二段文字有配對到資料，所以狀態皆為 update，而第三段與第四段因為沒有配對到資料，所以其狀態為 exit，這時候我們就可以對其進行操作，將多餘的資料刪除

<body>
  <p>我是第一段文字</p>
  <p>我是第二段文字</p>
  <p>我是第三段文字</p>
  <p>我是第四段文字</p>
<script>
  const data = ['我愛 How 哥', 'How 哥 No.1']
  d3.selectAll('p').data(data).text(item => item)
  d3.selectAll('p').data(data).exit().remove()
</script>
</body>

exit範例

繪製畫面

知道資料狀態後，接著只要對其做一些操作便可繪製完成圖表，這邊就實際的來做做看吧!
首先新增一個 html 的標籤與一些 css 的樣式

<div class="chart"></div>

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

再來是就是 D3 的部分了，這邊我們對選定的元素設定寬度與文字，這樣基本的圖表就完成了

let data = [30, 86, 168, 281, 303, 365]

d3.select('.chart')
  .selectAll('div')
  .data(data)
  .enter()
  .append('div')
  .style('width', item => item + 'px')
  .text(item => item)

圖表範例