d3.js學習10----折線圖的製作
一切盡在註釋中………………
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZheXian</title>
<script type="text/javascript"src="d3.js"></script>
<link rel="stylesheet"type="text/css" href="bee.css" />
</head>
<body>
<div id="part3">
</div>
<scripttype="text/javascript">
var dataset=[5,3,1,5,2,4,2];
varxMarks=['Mon','Tues','Wed','Thur','Fri','Sat','Sun'];
var w=600;
var h=400;
var title="Beijing";
var subTitle="temperature";
//定義畫布
var svg=d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
//新增標題
svg.append("g")
.append("text")
.text(title)
.attr("class","title")
.attr("x",220)
.attr("y",20);
//新增副標題
svg.append("g")
.append("text")
.text(subTitle)
.attr("class","subTitle")
.attr("x",220)
.attr("y",40);
//橫座標軸比例尺
var xScale = d3.scale.linear()
.domain([0,dataset.length-1])
.range([60,400]);//這個range相當於橫軸的左右平移
//縱座標軸比例尺
var yScale = d3.scale.linear()
.domain([0,d3.max(dataset)])
.range([220,60]);
//定義橫軸網格線
var xInner = d3.svg.axis()
.scale(xScale)
.tickSize(-160,0,0)//調整網格線長度
.orient("bottom")
.ticks(dataset.length);
//新增橫軸網格線
svg.append("g")
.attr("class","inner_line")
.attr("transform","translate(0," + 220 + ")")
//用來把縱的網格線上移的
.call(xInner)
.selectAll("text")
.text("");
//定義縱軸網格線
var yInner = d3.svg.axis()
.scale(yScale)
.tickSize(-340,0,0)
.tickFormat("")
.orient("left")
.ticks(5);
//新增縱軸網格線
var yBar=svg.append("g")
.attr("class","inner_line")
.attr("transform","translate("+60+",0)")
.call(yInner);
//定義橫軸
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(dataset.length);
//新增橫座標軸並通過編號獲取對應的橫軸標籤
var xBar=svg.append("g")
.attr("class","axis")
.attr("transform","translate(0," + 220 + ")")//用來上下平移橫軸位置
.call(xAxis)
.selectAll("text")
.text(function(d){return xMarks[d];});
//定義縱軸
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);//這個是細分度
//新增縱軸
var yBar=svg.append("g")
.attr("class", "axis")
.attr("transform","translate("+60+",0)")
.call(yAxis);
//新增折線
var line = d3.svg.line()
.x(function(d,i){return xScale(i);})
.y(function(d){return yScale(d);});
var path=svg.append("path")
.attr("d", line(dataset))
.style("fill","#F00")
.style("fill","none")
.style("stroke-width",1)
.style("stroke","#09F")
.style("stroke-opacity",0.9);
//新增系列的小圓點
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d,i) {
return xScale(i);
})
.attr("cy", function(d) {
return yScale(d);
})
.attr("r",5)
.attr("fill","#09F");
</script>
</body>
</html>
Css檔案程式碼：
body{
height: 100%;
}
.title{font-family:Arial,微軟雅黑;font-size:18px;text-anchor:middle;}
.subTitle{font-family:Arial,宋體;font-size:12px;text-anchor:middle;fill:#666}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
fill:#999;
}
.inner_line path,
.inner_line line {
fill: none;
stroke:#E7E7E7;
shape-rendering: crispEdges;
}
