璇之又璇的網路世界

資料選取

在繪製圖表前，首先要掌握 D3.js 如何 選取元素，接著才能將要修改的資料輸出到選取的元素裡。而 D3.js 選取元素的部分與 jQuery 是同一套作法，也就是以往撰寫 CSS 相關程式時，開發者怎麼比對元素，就是以那一套為基準即可！

例如選取 id 為 test 的元素則是使用 #test 作為選取器。

這裡假定開發者已稍微瞭解基礎的 CSS 選擇器（selector ），如果對於 CSS 選擇器還不熟悉的話，可以透過這個 有趣的盤子遊戲 來快速學習 CSS 選擇器！

而 D3.js 目前提供了兩種方法以供開發者捕捉元素：

SVG 除了基本的圖形繪製之外，另外還可以做到繪製文字、更改樣式、等等功能，今天我們將要來看看還有哪些功能沒介紹到的部分：

文字

SVG 中有提供一個 text 標籤以供我們繪製文字的部分：

• x ：文字左上角的 X 座標。
• y ：文字左上角的 Y 座標。
• dx ：以 x 座標為基準，平行移動文字距離（正為往右，負為往左）。
• dy ：以 y 座標為基準，垂直移動文字距離（正為往上，負為往下）。
• textLength ：文字字距。
• rotate ：每個文字的旋轉角度。（若是要整組文字一起旋轉可以使用 transform="rotate()" 。）

繪製圖形

上次提到了 D3.js 實際上是透過 HTML DOM 來操作元素標籤，並且透過 SVG 來繪圖的，而 SVG 繪圖十分簡單，各種基本圖形在 SVG 中都有標籤能夠直接使用，並且使用方法大同小異，只要控制該元素標籤的屬性，就能夠相對應的產生想要製作的圖形，以下列出 SVG 目前支援的標籤以及介紹各個標籤中有哪些屬性可以操控：

• 圓形 <circle>
• 橢圓形 <ellipse>
• 矩形 <rect>
• 線條 <line>
• 折線 <polyline>
• 多邊形 <polygon>
• 路徑 <path>

今天要來介紹 D3.js 如何繪製圖形，而其實 D3.js 本身程式並不會繪圖，嚴格來說是藉由操作 HTML DOM 來達到新增修改刪除等功能，而實際繪製圖形的部分則是會依靠 SVG 來產生，這裡要來稍微介紹一下這些名詞來幫助大家更快理解 D3.js 是怎麼運作的：

對於圖表的認知

開發者學習 D3.js 的理由可能有很多種，有人可能是為了自己興趣、也有人可能是為了專案需求，不論出發點在哪，最終 D3.js 目標都是在產出圖表給使用者看，因此圖表實際的意涵是否能達到我們要訴說的便是我們所要關切的地方。若開發者對於圖表的認知不足，即使製作出來的圖表有對應資料，並且使用了較為困難的技術來呈現，對於使用者來說也只是個無效的資訊。

渲染範圍

使用樣本語法時，我們可以在 HTML 中使用兩對花括號來表示要顯示的資料，並且透過 Vue.js 實體中的 el 來指定 Vue.js 渲染的範圍，並且在子元件的 template 中同樣也可以使用，然而如果是在 HTML 中的子元件標籤裡直接使用則會導致失效，如下面範例：

今天開始要進入到 D3.js 的單元啦，在進入 D3.js 的常用 API 章節前，我們一樣要先來介紹一下 D3.js：

渲染範圍

使用樣本語法時，我們可以在 HTML 中使用兩對花括號來表示要顯示的資料，並且透過 Vue.js 實體中的 el 來指定 Vue.js 渲染的範圍，並且在子元件的 template 中同樣也可以使用，然而如果是在 HTML 中的子元件標籤裡直接使用則會導致失效，如下面範例：

上一章節介紹到動態元件的使用方法，我們可以使用 is 來快速切換元件中的內容，藉著省下不少程式碼上的複製貼上，並且在 DOM 結構上也不會渲染出不必要的內容：

1
2
3
4
5
6

<div id="app">
    <button type="button" @click="pagename = 'mainpage'">switch to Main page</button>
    <button type="button" @click="pagename = 'aboutpage'">switch to About page</button>
    <button type="button" @click="pagename = 'contactpage'">switch to Contact page</button>
    <component :is="pagename"></component>
</div>

但假如使用者在這些頁面中進行如表單輸入等等的操作，接著切換到另一個元件中，原本的元件頁面就會消失，並且觸發 destroyed的生命週期鉤子，而當使用者在切換回原先的頁面時，就會發現已經輸入過的資料已經遺失了。

Dynamic component 動態元件

在某些情境下的專案中可能會需要透過標籤來切換頁面，可能第一個想到的會是使用 v-if 或是 v-show 的方式去顯示，並且透過在標籤上綁定資料物件來顯示內容：

在 HTML 部分，我們可能會使用v-on（縮寫@）去綁定 click 事件，透過點擊事件來更動 data 裡的資料（pagename）：