iT邦幫忙

DAY 11
3

SVG 與 D3.js系列 第 11

D3.js 國慶日在家裡畫長條圖

完整範例網址:http://wcc723.github.io/d3js/2014/10/10/Ironman-30-days-11/

上一篇的重點相當重要,可以運用在各種圖表上,而其實在之前介紹的用div繪製直條圖,在SVG上當然也是行得通,而且相當容易,今天是國慶日,當然就要來點簡易好吸收的主題。

有了上一篇的觀念,這個直條圖就能更容易地呈現,無論資料量的多寡,或者是資料值的大小,都能完整地呈現在SVG上。

Demo

在SVG上繪製直條圖,要注意的事情並不多,只有兩點需要略微注意:

  1. 直條Bar是從底部往上,但是一般SVG是由上往下
  2. Bar的寬度、間距要怎麼定義

問題一:最簡單的方式,就是將Bar向下位置一個距離(距離為高 - 資料值),接下來再往下延伸資料值的Bar,這個範例直接看圖可能比較好理解。

問題二:定義了Bar的寬度,如果資料的數量較多,可能多的部分會跑出SVG畫布,比較好的方式是定義間距的寬度就好,Bar的寬度由資料的總量來決定。

接下來不囉唆,快快看完今天的範例,來去過國慶日了。

var w = 600,h = 250,padding = 30, barMargin = 2;
//定義SVG的大小,但是只要定義直條的間距就好,寬度用算的就好

var dataset = []; 
for (var i=0; i < 20; i++){
	var Num1 = 5 + Math.floor(Math.random() * 255);
	dataset.push(Num1);
};
console.log(dataset);
//和先前一樣,產生一組隨機的資料

var Ymax = d3.max(dataset, function(d){return d}),
	Ymin = d3.min(dataset, function(d){return d})
//這個函示可以取得資料的最大值、最小值

var xScale = d3.scale.linear() //產生一個屬於X軸的線性尺度
	.domain([0, dataset.length]) //傳入的值改為資料的數量
	.range([padding , w - padding]) 
	//輸出的範圍是左邊的padd距離,到右邊的padding

var yScale = d3.scale.linear()
	.domain([Ymin, Ymax])
	.range([padding, h - padding])
	//類似X軸的尺度

var barWidth = (w - padding*2) / dataset.length - barMargin;
//算出每一個bar的寬度

var svg = d3.select('.demo').append('svg').attr({'width': w,'height': h})
//接下來開始產生SVG

svg.selectAll('rect').data(dataset).enter() //和先前一樣,選取'circle'並把資料加入
.append('rect') // 增加圓到SVG內
.attr({	//加入屬性到圓
	'x': function(d, i){return xScale(i)}, //利用尺度算出X的位置
	'y': function(d){return h - yScale(d)}, //同理算出Y,但是要放在底部,所以要y-yScale(d)
	'width': barWidth, //bar的寬度
	'height':function(d){return yScale(d)}, //高度算法與Y相同
	'fill': function(d){
		var color = 0.2 + d * 0.002;
		return  d3.hsl(200 ,color, color);
	} 
	//顏色的function hsl,可以將顏色算出後轉成色碼
	//格式 (360色相, 1彩度, 1明度)
});

svg.selectAll('text').data(dataset).enter() //補上資料數值
.append('text') 
.text(function(d){ return d}) //將值寫到SVG上
.attr({
	'x': function(d, i){return xScale(i) + barWidth/2},
	//和上面相同,算出X、Y的位置
	'y': function(d){return h - yScale(d) + 15}, //數值放在bar 內
	'fill': 'white', //文字填滿為白色
	'text-anchor': 'middle', //文字置中
	'font-size': '10px' //Fill、font-size也可以用CSS寫喔~
});

上一篇
D3.js Scale 尺度
下一篇
D3.js 利用Excel建立資料(CSV)
系列文
SVG 與 D3.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言