一：要實現的效果
二：代碼分析
1.需求分析
（1）數據以字典形式表示
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]
]
}
];
（2）座標軸樣式設置
<style>
.axis path,
.axis line{
fill:none;
stroke:black;
shape-rendering: crispedges;
}
.axis text{
font-family: sans-serif;
font-size: 11px;
}
</style>
2.全部代碼展示如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="d3.js"></script>
<style>
.axis path,
.axis line{
fill:none;
stroke:black;
shape-rendering: crispedges;
}
.axis text{
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<script>
//畫布大小
var padding={top:50,bottom:50,right:50,left:50};
var wwidth=500;
var hheight=500;
var svg=d3.select("body").append("svg")
.attr("width",wwidth)
.attr("height",hheight);
var width=300;
var height=300;
//數據
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]
]
}
];
//找最大gdp
var maxGdp=0;
for(var i = 0; i < dataset.length; i++){
var currGdp = d3.max( dataset[i].gdp , function(d) {
return d[1];});
if( currGdp > maxGdp )
maxGdp = currGdp;
}
//比例尺
var xscale = d3.scale.linear()
.domain([2000,2013])
.range([ 0,width]);
var yscale = d3.scale.linear()
.domain([0,maxGdp])
.range([ height,0]);
//console.log(maxGdp);
//線段生成器
var linePath=d3.svg.line()
.x(function(d,i){return xscale(d[0]);})
.y(function(d,i){return yscale(d[1]);});
//顏色
var colors=[d3.rgb(0,0,255),d3.rgb(0,255,0)];
//添加線段
svg.selectAll("path")
.data(dataset)
.enter()
.append("path")
.attr("transform","translate("+padding.left+","+(padding.top)+")")
.attr("d",function(d,i){
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");
//添加座標軸
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);
//添加標識
svg.append("rect")
.attr("x",100)
.attr("y",430)
.attr("width",30)
.attr("height",30)
.attr("fill",d3.rgb(0,0,255));
svg.append("text")
.attr("x",150)
.attr("y",450)
.attr("fill","black")
.text("china");
svg.append("rect")
.attr("x",200)
.attr("y",430)
.attr("width",30)
.attr("height",30)
.attr("fill",d3.rgb(0,255,0));
svg.append("text")
.attr("x",260)
.attr("y",450)
.attr("fill","black")
.text("japan");
</script>
</body>
</html>