使用D3绘制图表（4）--面积图表

　　面积图表的绘制就是在曲线图表的基础上做一点小小的改动。其他的代码跟绘制曲线图表没有什么区别，下面有黄色背景颜色的代码就是修改的，是不是很简单，第一句修改的地方就是把之前绘制线的函数（line）改成了绘制面积的函数（area）；第二句代码就是加的一行，“.y0(g_height)”这个意思代表的是x轴。“.y1(function(d){return scale_y(d);})”这句和上一句就构成了一个面积，“.style("fill","cornflowerblue")”这句就是给这个面积一个填充色。

　　1.js代码

var width = 500, height = 250, margin = {left:50, top:30, right:20,bottom:20},
g_width = width - margin.left - margin.right,
g_height = height - margin.top - margin.bottom;

//获取div，向里面添加svg
var svg = d3.select("#container")
.append("svg:svg")//在“container”中插入svg
.attr("width", width)//设置svg的宽度
.attr("height", height)//设置svg的高度

//添加g元素
var g = d3.select("svg")
.append("g")
.attr("transform","translate("+margin.left+","+margin.top+")")

var data = [0,1,3,5,9,4,2,3,6,8]//定义一个数组，里面放置了一些任意数字
var scale_x = d3.scale.linear()//把曲线沿x轴按比例放大
.domain([0, data.length-1])
.range([0, g_width])
var scale_y = d3.scale.linear()//把曲线沿y轴按比例放大
.domain([0, d3.max(data)])
.range([g_height,0])//使y轴按照数学中的方式显示，而不是浏览器的格式

var area_generator = d3.svg.area()//d3中绘制面积的函数
.x(function(d, i){return scale_x(i);})//曲线中x的值
.y0(g_height)//相当于x坐标
.y1(function(d){return scale_y(d);})//曲线中y的值
.interpolate("cardinal")//把曲线设置光滑

d3.select("g")
.append("path")
.attr("d", area_generator(data))
.style("fill","cornflowerblue")

var x_axis = d3.svg.axis().scale(scale_x),
y_axis = d3.svg.axis().scale(scale_y).orient("left")

g.append("g")
.call(x_axis)
.attr("transform","translate(0,"+g_height+")")

g.append("g")
.call(y_axis)
.append("text")
.text("price(￥)")
.attr("transform","rotate(-90)")//text旋转-90°
.attr("text-anchor","end")//字体尾部对齐
.attr("dy","1em")//沿y轴平移一个字体的大小

　　2.效果图