<!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ù)比例尺了。
