鐵人檔案
圈圈畫好了喔，所以... 圈圈叉叉 這次要利用vue來做一個即時互動的小遊戲:圈圈叉叉(井字遊戲) 為了要讓圈圈跟叉叉被畫在正確的位置上，所以用多層的div來...
D3 資料視覺化的利器 D3，全名是Data-Driven Documents，是javascript現在很流行的視覺化套件，彈性很大，處理資料速度快，程式碼簡...
select,select 這兩個的用處是選擇，html的元素，一個是單選，一個是多選，使用方法相當單純，也可以除了html的元素如p、h1...之外也可以選擇...
datum data 這兩個是D3用來將網頁與資料綁定的，datum綁定單一的資料,data綁定一組資料基本的操作如下 datum 先定義幾個html元素來操控...
這次來做簡單的圖表 首先一樣先在網頁上放點東西 svg.chart 再用d3來把圖表畫上去 var rheight = 25; var dataset=[10...
長條圖 這次來對簡單圖表做一些改變 使用< g >，svg中的group標籤 轉個方向，上次是橫的這次是直的 把數字放到chartbar中 首...
SVG 當開始要利用D3來製作圖表時，在大部分的時候需要利用SVG來呈現，所以需要了解什麼是SVG 什麼是SVG? SVG很早就存在了，是W3C制定的開放標準，...
比例尺 在之前簡單圖表及長條圖中，對於高度的定義都是直接取資料的大小來當作高度，雖然非常的簡單、直接，但其實不是一個好的作法。 舉例來說有兩組資料 datase...
座標軸 在製作圖表時，很多時候都會需要座標軸，而在SVG中並沒有座標軸這個元件可以使用，只有一些基本的圖形，所以如果要使用SVG來繪製座標軸的話會需要使用gro...
這次要在之前的長條圖上加上Ｘ軸來將這個長條圖完成 X軸 要加上Ｘ軸，需要使用另一種比例尺，序數比例尺(d3.scaleBand) 定義的方法與之前的線性比例尺相...
