1. 程式人生 > >使用D3.js繪製順化曲線圖、座標軸

使用D3.js繪製順化曲線圖、座標軸

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" type="text/css"/>
</head>
<body>
	<div id="container"></div>
	
	<script src="http://d3js.org/d3.v3.js" type="text/javascript"></script>
	<script src="js/index.js" type="text/javascript"></script>
</body>
</html>

index.js

// 定義svg的寬度和高度
var width = 500,
height = 250,
margin = {left:50,top:30,right:20,bottom:20},
// 圖表的寬度=svg的寬度減去margin
g_width = width - margin.left-margin.right,
g_height = height - margin.top - margin.bottom;

// svg
var svg = d3.select("#container")
.append("svg")
// 新增寬度和高度屬性 width,height
.attr("width",width) //attribute
.attr("height",height)

var g = d3.select("svg").append("g")
// 設定x,y軸偏移量
.attr("transform","translate(" +margin.left+","+ margin.top +")")

var data = [1,3,5,7,8,4,3,7]

// 設定縮放
var scale_x = d3.scale.linear().domain([0,data.length-1]).range([0,g_width])
var scale_y = d3.scale.linear().domain([0,d3.max(data)]).range([g_height,0])

var line_generator = d3.svg.line()
// d表示傳進來的資料 i表示資料的下標
.x(function(d,i){return scale_x(i);}) // 0,1,2,3
.y(function(d){return scale_y(d);}) // 1,3,5
// 去除線的稜角 使其順滑
.interpolate("cardinal")

g
.append("path")
// d 是 path data的縮寫 將data資料傳人
.attr("d",line_generator(data)) // d = "M1,0L20,40L40,50L100,100L0,200"

// 生成座標軸
var x_axis = d3.svg.axis().scale(scale_x),
// y軸在左側
y_axis = d3.svg.axis().scale(scale_y).orient("left");

g.append("g")
.call(x_axis)
.attr("transform","translate(0,"+ g_height +")")

g.append("g")
.call(y_axis)
//新增座標軸敘述
.append("text")
.text("Price($)")
.attr("transform","rotate(-90)")
.attr("text-anchor","end")
.attr("dy","1em")

style.css

#container {
	background: #ddd;
	width: 500px;
	height: 250px;
}

path {
	fill:none;
	stroke: #4682B4;
	stroke-width:2;
}
/* 設定座標樣式 */
.domain,tick line {
	stroke:gray;
	stroke: width;
}