iT邦幫忙

DAY 9
2

SVG 與 D3.js系列 第 9

D3js 將資料投影到SVG上

完整範例請看:http://wcc723.github.io/d3js/2014/10/08/Ironman-30-days-09/

先前介紹SVG那麼多的篇幅,結果上一篇居然用Div了事,這樣怎麼說得過去...,所以這篇要用SVG把”資料”畫出來。

為何又是SVG

在上一篇的介紹,相信對D3js有很基本的了解,就是資料進來,然後加入html物件,接下來調整外觀...,大致上是如此。在”資料驅動物件”這基礎上,目標物件事要容易被控制且有彈性,SVG俱有這樣的特色,SVG可以在範圍內隨意定義位置、色彩甚至是外形,且屬性單純(吧...)。

Demo

這篇就來份不怎麼安分的資料,他是陣列內還包陣列的資料,大概像下面這樣:

var dataset = [[5, 20], [480, 90], [250, 50]]

不只是這樣,我們還要隨機的,增加的豐富性,當然這邊就直接看範例以及程式碼吧。

var w = 600;
var h = 250;

var dataset = [];
for (var i=0; i < 20; i++){
var Num1 = 5 + Math.floor(Math.random() * 480); //產生第一個數值
var Num2 = 5 + Math.floor(Math.random() * 230); //產生第二個數值
dataset.push([Num1, Num2]); //兩個合併成一個陣列
};
console.log(dataset); //檢查看看有沒有怪怪的

var svg = d3.select('.demo').append('svg').attr({'width': w,'height': h})
//產生一個SVG

svg.selectAll('circle').data(dataset).enter() //記得喔 data(dataset).enter() 把資料放入
.append('circle')
.attr({
'cx': function(d){return d[0] + 10}, //定義圓心的x,在第一個值
'cy': function(d){return d[1] + 10}, //定義圓心的y,在第二個值
'r': function(d){return Math.sqrt(h - d[1])}, //圓心的半徑,第二個值開平方
'fill': function(d){return d3.hsl(d[0] % 360, .6, .6 );}
//介紹一個顏色的function hsl,可以將顏色算出後轉成色碼
//格式 (360色相, 1彩度, 1明度)
});

svg.selectAll('text').data(dataset).enter() //補上資料數值
.append('text')
.text(function(d){ return d[0]+ ',' + d[1]}) //將值寫到SVG上
.attr({
'x': function(d){return xScale(d[0])}, //和上面相同,算出X、Y的位置
'y': function(d){return yScale(d[1])},
'fill': 'red', //文字填滿為紅色
'font-size': '10px' //Fill、font-size也可以用CSS寫喔~
});

這一篇難度也沒有很高,主要只是要介紹怎麼使用D3.js畫在SVG上,但是下一篇,將會有很重要的觀念需要了解。


上一篇
初入D3.js
下一篇
D3.js Scale 尺度
系列文
SVG 與 D3.js30

尚未有邦友留言

立即登入留言