标签：
<html>
<head>
<style type="text/css">
.area{
fill:steelblue;
}
</style>
<title></title>
</head>
<body>
<script src="js/d3.v3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var margin = {top:40,right:30,bottom:20,left:50};
var height = 500-margin.top-margin.bottom;
var width = 960-margin.left-margin.right;
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");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var area = d3.svg.area()
.x(function(d){return x(d.date)})
.y0(height)
.y1(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+")");
var parseDate = d3.time.format("%d-%b-%y").parse;
d3.tsv("Area_chart.tsv",function(error,data){
if(error) throw error;
data.forEach(function(d){
d.date = parseDate(d.date);
d.close = +d.close;
});
x.domain(d3.extent(data,function(d){
return d.date;
}));
y.domain([0,d3.max(data,function(d){
return d.close;
})])
svg.append("path")
.datum(data)
.attr("class","area")
.attr("d",area);
svg.append("g")
.attr("transform","translate("+0+","+height+")")
.call(xAxis);
svg.append("g")
.call(yAxis);
})
</script>
</body>
</html>标签：
原文地址：http://blog.csdn.net/yhn1121/article/details/50748109
