D3.js svg繪制折線圖

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="zh-CN" xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<head>

<title>折線圖的制作</title>

</head>


<style>

? ? .axis path,

? ? .axis line{

? ? ? ? fill:none;

? ? ? ? stroke:black;

? ? ? ? shape-rendering:crispEdges;

? ? }

</style>

<body>

? ? <!-- // <script src="d3/d3.js" charset="utf-8"></script> -->

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>?

<script>

var width=500;

var height=500;

var dataset=[

? ? {

? ? ? ? country:"china",

? ? ? ? gdp:[[2000,11920],[2001,13170],[2002,14550],

? ? ? ? ? ? [2003,16500],[2004,19440],[2005,22870],

? ? ? ? ? ? [2006,27930],[2007,35040],[2008,45470],

? ? ? ? ? ? [2009,51050],[2010,59490],[2011,73140],

? ? ? ? ? ? [2012,83860],[2013,103550],]

? ? },

? ? {

? ? ? ? country:"japan",

? ? ? ? gdp:[[2000,47310],[2001,41590],[2002,39800],

? ? ? ? ? ? [2003,43020],[2004,46550],[2005,45710],

? ? ? ? ? ? [2006,43560],[2007,43560],[2008,48490],

? ? ? ? ? ? [2009,50350],[2010,54950],[2011,59050],

? ? ? ? ? ? [2012,59370],[2013,48980],]

? ? }

];

var padding={top:70, right:70, bottom: 70, left:70};

var gdpmax=0;

for(var i=0;i<dataset.length;i++){

? ? var currGdp=d3.max(dataset[i].gdp,function(d){

? ? ? ? return d[1];

? ? });

? ? if(currGdp>gdpmax)

? ? ? ? gdpmax=currGdp;

}

console.log(gdpmax);

var xScale=d3.scale.linear()

? ? ? ? ? ? .domain([2000,2013])

? ? ? ? ? ? .range([0,width-padding.left-padding.right]);

var yScale=d3.scale.linear()

? ? ? ? ? ? .domain([0,gdpmax*1.1])

? ? ? ? ? ? .range([height-padding.bottom-padding.top,0]);

var linePath=d3.svg.line()//創(chuàng)建一個直線生成器

? ? ? ? ? ? ? ? .x(function(d){

? ? ? ? ? ? ? ? ? ? return xScale(d[0]);

? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? .y(function(d){

? ? ? ? ? ? ? ? ? ? return yScale(d[1]);

? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? .interpolate("basis")//插值模式

? ? ? ? ? ? ? ? ;

//定義兩個顏色

var colors=[d3.rgb(0,0,255),d3.rgb(0,255,0)];

var svg=d3.select("body")

? ? ? ? ? ? ? ? .append("svg")

? ? ? ? ? ? ? ? .attr("width",width)

? ? ? ? ? ? ? ? .attr("height",height);

svg.selectAll("path")

? ? .data(dataset)

? ? .enter()

? ? .append("path")

? ? .attr("transform","translate("+padding.left+","+padding.top+")")

? ? .attr("d",function(d){

? ? ? ? return linePath(d.gdp);

? ? ? ? //返回線段生成器得到的路徑

? ? })

? ? .attr("fill","none")

? ? .attr("stroke-width",3)

? ? .attr("stroke",function(d,i){

? ? ? ? return colors[i];

? ? });

var xAxis=d3.svg.axis()

? ? ? ? ? ? .scale(xScale)

? ? ? ? ? ? .ticks(5)

? ? ? ? ? ? .tickFormat(d3.format("d"))

? ? ? ? ? ? .orient("bottom");

var yAxis=d3.svg.axis()

? ? ? ? ? ? .scale(yScale)

? ? ? ? ? ? .orient("left");

//添加一個g用于放x軸

svg.append("g")

? ? .attr("class","axis")

? ? .attr("transform","translate("+padding.left+","+(height-padding.top)+")")

? ? .call(xAxis);

svg.append("g")

? ? .attr("class","axis")

? ? .attr("transform","translate("+padding.left+","+padding.top+")")

? ? .call(yAxis);

</script>

</body>

</html>



原理:

1帆焕、如果用原生數(shù)值代替像素值不恭,顯示的圖形過小或過大時换吧,就需要將某一區(qū)域的值映射到另一區(qū)域,但其大小關(guān)系不變满着,這就是比例尺(Scale)了贯莺。

2缕探、定義域與值域

在數(shù)學(xué)中,x 的范圍被稱為定義域耙考,y 的范圍被稱為值域潭兽。D3 中的比例尺讼溺,也有定義域和值域最易,分別被稱為 domain 和 range炫狱。開發(fā)者只需要指定 domain() 和 range() 的范圍剔猿,如此即可得到一個計(jì)算關(guān)系归敬。

3、兩種比例尺

①線性比例尺:


其中椅亚,d3.scale.linear() 返回一個線性比例尺舱污,返回值可以當(dāng)做函數(shù)來使用的扩灯。domain() 和 range() 分別設(shè)定比例尺的定義域和值域。

注意:V4 版本改變了寫法珠插,應(yīng)該是 var linear = d3.scaleLinear(); 。

在這里還用到了兩個函數(shù)磨隘,它們經(jīng)常與比例尺一起出現(xiàn):

1.d3.max()

2.d3.min()

這兩個函數(shù)能夠求數(shù)組的最大值和最小值琳拭,是 D3 提供的描验。

②序數(shù)比例尺:

如果,定義域和值域不一定是連續(xù)的絮缅,都是離散的呼股。那就要用到序數(shù)比例尺了。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末吸奴,一起剝皮案震驚了整個濱河市则奥,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌糊治,老刑警劉巖罚舱,帶你破解...
    沈念sama閱讀 216,744評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件管闷,死亡現(xiàn)場離奇詭異,居然都是意外死亡阿逃,警方通過查閱死者的電腦和手機(jī)赃蛛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,505評論 3 392
  • 文/潘曉璐 我一進(jìn)店門呕臂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人土砂,你說我怎么就攤上這事萝映〔椋” “怎么了?”我有些...
    開封第一講書人閱讀 163,105評論 0 353
  • 文/不壞的土叔 我叫張陵奥秆,是天一觀的道長构订。 經(jīng)常有香客問我,道長悼瘾,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,242評論 1 292
  • 正文 為了忘掉前任卸勺,我火速辦了婚禮箩绍,結(jié)果婚禮上材蛛,老公的妹妹穿的比我還像新娘怎抛。我一直安慰自己,他們只是感情好马绝,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,269評論 6 389
  • 文/花漫 我一把揭開白布掷邦。 她就那樣靜靜地躺著椭赋,像睡著了一般。 火紅的嫁衣襯著肌膚如雪宣蔚。 梳的紋絲不亂的頭發(fā)上认境,一...
    開封第一講書人閱讀 51,215評論 1 299
  • 那天亩冬,我揣著相機(jī)與錄音,去河邊找鬼鉴未。 笑死铜秆,一個胖子當(dāng)著我的面吹牛讶迁,可吹牛的內(nèi)容都是我干的核蘸。 我是一名探鬼主播客扎,決...
    沈念sama閱讀 40,096評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼徙鱼,長吁一口氣:“原來是場噩夢啊……” “哼袱吆!你這毒婦竟也來了距淫?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,939評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎彤枢,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體家肯,經(jīng)...
    沈念sama閱讀 45,354評論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡讨衣,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,573評論 2 333
  • 正文 我和宋清朗相戀三年式镐,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片歹茶。...
    茶點(diǎn)故事閱讀 39,745評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖禽作,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情旷偿,我是刑警寧澤,帶...
    沈念sama閱讀 35,448評論 5 344
  • 正文 年R本政府宣布兔仰,位于F島的核電站蕉鸳,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏榕吼。R本人自食惡果不足惜衍锚,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,048評論 3 327
  • 文/蒙蒙 一嗤堰、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧踢匣,春花似錦告匠、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,683評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至输莺,卻和暖如春戚哎,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背嫂用。 一陣腳步聲響...
    開封第一講書人閱讀 32,838評論 1 269
  • 我被黑心中介騙來泰國打工型凳, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人嘱函。 一個月前我還...
    沈念sama閱讀 47,776評論 2 369
  • 正文 我出身青樓甘畅,卻偏偏與公主長得像,于是被迫代替她去往敵國和親往弓。 傳聞我的和親對象是個殘疾皇子疏唾,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,652評論 2 354

推薦閱讀更多精彩內(nèi)容