EP01 | 學會 D3.js 製作圖表 - 基礎概念

發表於 更新於 分類於 ，

D3.js 官網如此寫道：

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

簡單說就是 D3.js 可以讓我們利用 JavaScript 基於給予的資料來製作出圖表。

第一次使用 D3.js

  1. 匯入 D3.js 資料庫
1
<script src="https://d3js.org/d3.v7.min.js"></script>
  1. 選取元素

利用 d3.select('.d3') 來選取單個元素，而 d3.selectAll('.d3') 選取多個元素。

不要跟 document.querySelector('元素選取器') 方法搞混了喔。

1
2
3
4
5
6
7
8
<div class="d3">
  Hello D3 !
</div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
  console.log(d3);
  d3.select('.d3');
</script>
  1. 添加或變更文字內容

利用 text('文字內容') 在選取的元素內添加或變更文字。

1
2
3
4
5
6
7
8
<div class="d3">
  Hello D3 !
</div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
  d3.select('.d3')
  .text('Start D3 !');
</script>

利用 D3.js 添加元素

利用 append('元素名') 在選取的元素內添加元素。

另外必須注意 text() 使用位置，在不同位置下使用，被添加的文字位置也不同喔！

1
2
3
4
5
6
7
8
9
<div class="d3">
  Hello D3 !
</div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
  d3.select('.d3')
  .append('a')
  .text('First D3 !');
</script>

利用 D3.js 為元素新增屬性

利用 attr('屬性名','屬性值') 為選取的元素添加屬性。

同樣要注意 attr('屬性名','屬性值') 的使用位置喔！

1
2
3
4
5
6
7
8
9
10
11
<div class="d3">
  Hello D3 !
</div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
  d3.select('.d3')
  .attr('data-name','d3')
  .append('a')
  .attr('href','#')
  .text('First D3 !');
</script>

利用 D3.js 更改樣式

利用 style('屬性名','屬性值') 改變選取的元素的樣式。

1
2
3
4
5
6
7
8
9
10
11
<div class="d3">
  Hello D3 !
</div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
  d3.select('.d3')
  .append('a')
  .style('background-color', 'red')
  .style('color', 'white')
  .text('First D3 !');
</script>

建立 SVG 圖形

結合上面的方法創建出 SVG 圖形。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
  //創建 SVG 元素
let svg = d3
  .select("body")
  .append("svg")
  .attr("width", 400)
  .attr("height", 400);

//在 SVG 元素中建立 circle 元素，並寫入屬性
//也可以建立別的圖形，如 rect、line、polygon等等
let circle = svg
  .append("circle")
  .attr("cx", 50)
  .attr("cy", 50)
  .attr("r", 20)
  .attr("fill", "purple");
</script>

結合資料創建 SVG 圖形

建立資料

1
2
3
<script>
  let data = [20, 35, 68]
</script>

建立基本 SVG 圖形並結合資料

結合上面的 D3.js 基本的方法先來簡單的創建 SVG 圖形。

data(資料) ：帶入欲使用的資料。

enter() ：利用類似 forEach() 的概念，依據 data(資料) 方法建立相同數量的元素節點(此時還不知道要創建哪個元素)。

append() ：利用 enter() 方法後，使用 append() 來創建元素(此時才創建元素)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<body>
</body>
<script>
  // 資料
  let data = [20, 35, 68]

  //創建 SVG 元素
  let svg = d3.select('body')
              .append('svg')
              .attr('width', 400)
              .attr('height', 400);

  //先選取所有的 rect 元素，但因為尚未有該元素，所以 svg.selectAll('rect') 是不存在的，但必須要寫！
  let bar = svg.selectAll('rect')
                //欲使用的資料
                .data(data)
                //enter() 依據 data 的資料數量創建出元素
                //類似 forEach 的概念
                .enter()
                //結合資料後，欲創建的元素名
                .append('rect')
                .attr('x', 150)
                // 透過 function(d,i) 將資料分別帶入，並透過 return 回傳結果
                // d 代表資料值， i 代表索引
                .attr('y', function(d, i){
                  // 每條 bar 放置的 y 值
                  console.log(d,i)
                  return i * 70
                })
                .attr('width', function(d, i){
                  // 每條 bar 的寬度
                  return d * 5
                })
                .attr('height', 50)

</script>

Demo

See the Pen D3 by Celeste6666 (@celeste6666) on CodePen.

參考資料

D3.js