1. d3.js 是一個將數據轉化爲圖表的javascript庫。效果如如下：
script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>也可自行去官網下載至本地。2.完整代碼如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Graph</title>
<style type = "text/css">
body{ font: 12px Arial;}
path{
stroke: red;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line{
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
<!--<script type="text/javascript" src="/assets/d3.js"></script>-->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
var margin = {top:30, right:20, bottom: 30, left: 50};
width = 1000 - margin.left -margin.right;
height = 270 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b-%y").parse;
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(10);
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(10);
//?
var valueline = d3.svg.line()
.x(function(d){return x(d.date);})
.y(function(d){return y(d.close);});
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//Get the data
d3.csv("/assets/data.tsv", function(data){
data.forEach(function(d){
d.date = parseDate(d.date);
d.close = +d.close;
});
//Scale(規模) the range of the data
x.domain(d3.extent(data, function(d){
return d.date;
}));
y.domain([0, d3.max(data, function(d){
return d.close;
})]);
//Add the valueline path
svg.append("path")
.attr("d", valueline(data));
//Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
//Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
</script>
</body>
</html>
date,close,link
30-Apr-12,53.98,http://bl.ocks.org/d3noob/11313583
27-Apr-12,67.00,http://bl.ocks.org/d3noob/11306153
26-Apr-12,89.70,http://bl.ocks.org/d3noob/11137963
25-Apr-12,99.00,http://bl.ocks.org/d3noob/10633856
24-Apr-12,130.28,http://bl.ocks.org/d3noob/10633704
23-Apr-12,166.70,http://bl.ocks.org/d3noob/10633421
20-Apr-12,234.98,http://bl.ocks.org/d3noob/10633192
19-Apr-12,345.44,http://bl.ocks.org/d3noob/10632804
18-Apr-12,443.34,http://bl.ocks.org/d3noob/9692795
17-Apr-12,543.70,http://bl.ocks.org/d3noob/9267535
16-Apr-12,580.13,http://bl.ocks.org/d3noob/9211665
13-Apr-12,605.23,http://bl.ocks.org/d3noob/9167301
12-Apr-12,622.77,http://bl.ocks.org/d3noob/8603837
11-Apr-12,626.20,http://bl.ocks.org/d3noob/8375092
10-Apr-12,628.44,http://bl.ocks.org/d3noob/8329447
9-Apr-12,636.23,http://bl.ocks.org/d3noob/8329404
5-Apr-12,633.68,http://bl.ocks.org/d3noob/8150631
4-Apr-12,624.31,http://bl.ocks.org/d3noob/8273682
3-Apr-12,629.32,http://bl.ocks.org/d3noob/7845954
2-Apr-12,618.63,http://bl.ocks.org/d3noob/6584483
1-Apr-12,599.55,http://bl.ocks.org/d3noob/5893649
此頁面可分爲兩部分： css 和 javascript
css 用於控制圖表的樣式， javascript用於圖表的定義
d3.csv("data/data.tsv", function(data){
data.forEach(function(d){
d.date = parseDate(d.date);
d.close = +d.close;
});……其他任何方式都是錯誤的。
關於數據格式詳細介紹，請查看d3.js文檔
javascript
- 設置邊距和圖表大小。 我們設定畫布的大小爲：width:600,height:270，用一個margin對象來存儲圖表的邊距信息，計算出圖表的寬度和高度
var margin = {top: 30, right: 20, bottom: 30, left: 50}, width = 600 - margin.left - margin.right, height = 270 - margin.top - margin.bottom;
-
設置橫軸方向和縱軸方向的區域（Domains）和範圍（Ranges）
var x = d3.time.scale().range([0, width]); var y = d3.scale.linear().range([height, 0]);
- 爲line()畫線函數添加數據
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"
);d3.select(“body”)選擇body元素，然後在body裏面增加一個子元素”svg”,給這個svg設定一些屬性，再往“svg”中添加一個”g”元素並設定一些屬性
