什麼是互動?簡單說希望能夠讓使用者允許監聽和分派事件，用比較白話的一點方式舉例就是當我們滑鼠按下某個元素的時候，圖表會呈現某些樣貌，監聽就是滑鼠按下的意思，委派...
過渡動畫 transition這個翻譯成過渡的意思，一個吸引人的圖表當中，加入了一點動畫成分和過渡的轉變能吸引使用者的目光，也讓觀看者有預期心理畫面將要轉換，另...
昨天我們繪製了長條圖的情況，今天我們再畫出所對應的數字座標軸就可以呈現這一份圖表了，目前長條圖的Y軸部分缺少的就是數值的對應，今天我們要來使用axisAPI來做...
前言 想像一下假設今天你的資料的數字是如此龐大，而電腦螢幕的寬和高卻是有限的情況之下，不可能以1個人口對應1個螢幕的高或是寬，例如我們的資料是各個國家的人口數，...
綁定的資料和畫面上的元素不相等 enter()函式—沒放入元素的資料 先看以下程式碼 <body> <div></div>...
資料綁定 datum()函式 前面的文章多半是在使用D3來操作DOM，這邊主要探討D3的核心，將資料綁定在DOM的元素中，換句話說DOM的元素樣貌可以透過資料來...
淺談原始碼 D3包裝了Javascript的fetchAPI來擷取資料我們這裡可以看到D3Js的原始碼為以下片段，不難看出它是return了fetchAPI f...
這次相比長條圖使用多一點的資料，陣列如下並且一樣先宣告svg變數繪製一個寬800高450的畫布 const ary = [130,45,239,20,30,24...
用D3繪製長條圖 我們現在可以嘗試著用已經學到的SVG來畫長條圖，只不過是透過D3Js的操作來新增SVG元素到html裡面。 先宣告一個變數叫做svg並且透過D...
如何開始D3js 方法一 使用CDN 請google搜尋D3Js到D3Js的官方網站。滑鼠滾輪到下方處複製<script src="https:...
由於D3Js的組成部分來自於操控SVG(Scalable Vector Graphics)，所以簡單介紹一下SVG。 SVG組成是屬於向量圖形(透過電腦計算路徑...
圖片來源:unsplash 關於資料視覺化的工具一般使用者最先接觸的可能是Microsoft Excel工具，後來在程式語言當中常見的是Python Ma...
簡介 本系列內容將會提及D3Js和資料相關內容的知識，主題訂定為資料駕馭網頁，其實一部分原因來自D3Js原始英文來自於Data-Driven Documents...
中斷了。那就再繼續吧這次將上次的範例修改，可以透過 d3.zoom() 來達成縮放分布圖與座標軸上一篇 目標 上次遇到的問題是，對於坐標軸轉換、圖形位置的轉...
豆腐
‧
2020-09-23
這次要學甚麼?這次透過一個範例，使用 scaleLinear() 做出可以縮放的分布圖 首先，本篇是基於這個範例時做出來的 Efrat Vilenski -...
豆腐
‧
2020-09-17
前言 恭喜你進展到第 17 天，來到旅程的中央。相信你已經在 js 荒漠中，學會不少技能，並且找到一些綠洲。現在開始我們要往後半段前進，首先會花個幾天在&quo...
為何現在研究 d3.js？最近在工作上開始接觸 d3.js 要客製一個圖表，呈現大量分群資料，投射至二維空間上的對應位置。從之前了解到，d3.js 是很適合，...
豆腐
‧
2020-09-16
對前端工作者來說，現在是個很便利的時代，各種公開資訊會做成API讓有心使用資料的民眾去串接，比如疫情時期政府便有放上藥局口罩存量的API在政府網頁，由此許多民間...
學習完 Vue 之後，想要透過單元測試守護你的專案，但又不知道從何起手？別擔心，快來訂閱作者最新系列文 《小白也能輕鬆瞭解的 Vue3 單元測試！》讓你的 V...
D3 除了繪製圖表外還可以拿來繪製地圖，而這篇的目標是繪製一個世界地圖，那就開始吧！ 地圖格式 繪製地圖前我們要先了解一下會使用到的資料格式，比較常看見的會有...
上一篇介紹了 D3.js 的基礎，這篇會邊繪製圖表邊介紹繪製的方法，我們會使用到 SVG，還不熟悉 SVG 也可以參考下面的文章哦SVG - 基礎圖形與樣式SV...
D3.js（Data-Driven Documents）是一個 JavaScript 的 Library，顧名思義是使用資料驅動文件，它可以操縱 DOM 元素，...
前言 不知不覺就到最後一天了，沒想到這次竟然也可以完賽，果然每天屁話個幾句就可以順利產出文章了(X 為了呼應上面所說，所以今天就來當個文章小偷來分類一下這次系列...
前言 昨天的文章利用 componentDidMount 結合 D3 ，但相信讀者一定會覺得這樣的寫法又臭又長，而且這個 class 裡面也才寫了一個 comp...
前言 前面的文章都介紹完圖表的繪製後，今天終於要回歸主題，把 D3 跟 React 結合在一起了，今天跟明天的文章都會把以前所講的內容做一個統整，假如對 Rea...
前言 今天要來介紹本系列文最後一個圖表了，由於鐵人賽時間真的很有限沒辦法介紹全部的圖表，但筆者已經盡量把最常用的幾種圖表都介紹給大家了，相信大家學會這幾種圖表一...
前言 昨天的文章介紹了圓餅圖，今天要來介紹圓餅圖的變形版：環圈圖，其實筆者自己比較少用圓餅圖，只要是這種要計算數據比例的統計圖現在都改用環圈圖了，至於為什麼會有...
前言 今天要來介紹一個比較特別的圖表，在前天的文章提到長條圖，用來反映事物分布、集中情況，昨天的文章提到折線圖，用來顯示數據的變化趨勢，但是這些都無法得知單一數...
前言 在講完長條圖之後接下來要介紹的是折線圖，折線圖也是視覺化中非常重要且基礎的一種圖表，廢話不多說馬上開始今天的文章吧！ 折線圖 折線圖是用直線段將各數據點連...
前言 昨天的文章講完如何繪製長條圖後，今天要來講點進階版的長條圖了，其實說進階也沒到多進階就只是讓同一個 band 可以多畫一些 rect 出來形成多重長條圖而...
DannyChen
我是圈圈
ShawnL
陳奕帆 Andy Chen
iThome鐵人賽
看影片追技術