璇之又璇的網路世界

今天要來以 iT 邦幫忙的鐵人賽檔案當作開發範例啦！

首先我們先來看看正版的鐵人賽檔案長什麼樣子：

忽略左上角之後，我們可以看到下方的這個區塊非常適合來開發成一個元件，而這個元件要考慮到哪些地方呢？假如今天大雄有參與不同年度的鐵人賽，並且又報名不同組別等等，加上文章本身就會有標題、鐵人是否練成、發了幾篇文章、有多少人訂閱等等，有許多控制項目可以玩，我們挑選其中幾個項目之後，在這裡發揮我們工程師的技能

單一元件檔

今天要來介紹的是單一元件檔，單一元件檔在 Vue-cli 中被大量地使用，算是寫 Vue-cli 不可不知的一環，而在昨天我們安裝好 Vue-cli 環境後，可以看見 src 資料夾底下充滿著大量 .vue 結尾的檔案，大家或許會滿臉疑惑，因為前一兩周寫 Vue.js 根本沒有提到這個東西啊？那他到底是什麼呢？

Vue-cli

當我們終於熟悉 Vue.js 的一些基本用法後，專案上可能會要使用 webpack 來建立專案，而今天要來介紹的 Vue-cli ，主要是提供開發者一個快速建置 Vue.js 架構的工具，並基於 webpack，提供了許多相關的功能、套件安裝協助。而這裡建議使用 Vue-cli 前可以稍微瞭解 Vue.js 一些基本的指令以及元件概念基礎，並且要有不怕操作基本終端機指令的一顆心。

D3.js 地圖

今天我們要來繪製 D3.js 人人必繪的地圖啦！

我們首先到臺灣 政府資料開放平臺 的網站中下載以縣市為界的台灣地圖 SHP 檔案：

繪製散點圖 scatter chart

昨天我們已經繪製出座標軸了，而接下來要繪製散點圖就非常的容易了，繪製散點圖的原理與繪製座標軸的原理類似，並且更簡單，我們只要在圖表內生成 SVG 圓形標籤時，藉由其屬性 cx 與 cy 定義圓形標籤的位置之後，即可將圓點產生在資料對應的位置。

以下範例用昨天已繪製好的座標軸繼續延伸：

繪製座標軸

透過 D3.js 比例尺後，我們現在已經可以透過資料得到對應比例尺的數值了，而今天要緊接著透過這個數值來繪製座標軸，並且一樣採用 Vue.js 框架來說明。

而在 Vue.js 中的實體設定基本上與前幾天差不多，最主要我們將資料集換成每筆資料各有兩個屬性資料的格式：

在圖表當中不可或缺的除了基本的資料與圖表之外，另一項就是比例尺的部分。在 D3.js 中，開發者可以透過比例尺將一段範圍的某個數值對應到另一段範圍的數值，這麼做的好處在於我們可以將資料轉換成一個具有比例意義的圖表，並且依比例縮放成我們所要的大小而不是毫無比例根據的作圖。

昨天我們已經成功的將 D3.js 放入 Vue.js 裡面，藉由 Vue.js 的 生命週期鉤子 與 監聽 來驅動函式重新繪製圖表，而今天要來說明的是 D3.js 中的資料處理與篩選：

註：這裡指的資料處理是指對以優化過的資料集做延伸的處理，倘諾資料集本身需要大量的欄位調整、優化則建議需在資料庫、後端回傳 API 前就先將資料集處理完畢。

D3.js in Vue.js 阿彌陀丸 in 春雨

既然最近介紹的主題是 Vue.js 跟 D3.js，那就沒有道理不把 D3.js 融合進 Vue.js 啦！我們接下來把昨天的繪製函式加入到我們 Vue.js 中，並著利用 Vue.js 的一些特色來完成我們的融合：

enter()

昨天我們已知 enter 資料類型的定義是當綁定資料時，選取元素不足以綁定時，該筆資料類型會被分類為 enter 類型。

因此，我們可以透過綁定一個頁面上沒有的元素類別，利用 enter()找出不夠資料塞入的元素筆數，再透過 append() 函式新增元素：