鐵人檔案
內容提及D3Js和資料相關內容的知識，主題訂定為資料駕馭網頁，其實一部分原因來自D3Js原始英文來自於Data-Driven Documents，其中documents也是網頁中的物件，因此我將它命名成資料駕馭網頁也更好理解，預計不定時會補充官方API文件和網頁相關知識，文中能以step by step方式，期望讓Javascript和處理資料的初學者能夠理解。
簡介 本系列內容將會提及D3Js和資料相關內容的知識，主題訂定為資料駕馭網頁，其實一部分原因來自D3Js原始英文來自於Data-Driven Documents...
圖片來源:unsplash 關於資料視覺化的工具一般使用者最先接觸的可能是Microsoft Excel工具，後來在程式語言當中常見的是Python Ma...
由於D3Js的組成部分來自於操控SVG(Scalable Vector Graphics)，所以簡單介紹一下SVG。 SVG組成是屬於向量圖形(透過電腦計算路徑...
如何開始D3js 方法一 使用CDN 請google搜尋D3Js到D3Js的官方網站。滑鼠滾輪到下方處複製<script src="https:...
用D3繪製長條圖 我們現在可以嘗試著用已經學到的SVG來畫長條圖，只不過是透過D3Js的操作來新增SVG元素到html裡面。 先宣告一個變數叫做svg並且透過D...
這次相比長條圖使用多一點的資料，陣列如下並且一樣先宣告svg變數繪製一個寬800高450的畫布 const ary = [130,45,239,20,30,24...
格式介紹 通常你的資料會是檔案、API接口或是一個連結作為D3輸入的資料，這邊就以下常見的資料格式簡單介紹一下 CSV逗號分隔值(Comma-Separated...
淺談原始碼 D3包裝了Javascript的fetchAPI來擷取資料我們這裡可以看到D3Js的原始碼為以下片段，不難看出它是return了fetchAPI f...
資料綁定 datum()函式 前面的文章多半是在使用D3來操作DOM，這邊主要探討D3的核心，將資料綁定在DOM的元素中，換句話說DOM的元素樣貌可以透過資料來...
綁定的資料和畫面上的元素不相等 enter()函式—沒放入元素的資料 先看以下程式碼 <body> <div></div>...
