d3.js——面积图表的制作

在上一篇的文章里我们可以知道，线型图表的制作主要是采用了 d3.svg.line() 这个函数进行绘制的，比较线型图表的绘制方法，我们只要采用 d3.svg.area() 这个函数即可实现面积图表的绘制啦~！

具体代码实现如下啦~：

/**
* Created by Silence_C on 2016/4/14.
*/
var width = 500,height = 200;
margin = {left :50,top:30,right:20,bottom:20}
var g_width = width-margin.left- margin.right,
g_height = height-margin.top-margin.bottom;

var svg = d3.select("#container")
.append("svg")
.attr("width",width)
.attr("height",height)

var g = d3.select("svg")
.append("g")
.attr("transform","translate("+margin.left+","+margin.top+")")

var data = [1,3,5,7,8,4,3,7];
//设置比例缩放
var scale_x = d3.scale.linear()
.domain([0,data.length-1])
.range([0,g_width])
var scale_y = d3.scale.linear()
.domain([0,d3.max(data)])
.range([g_height,0])
//绘制面积图表，注意需要三个参数哦，y0将原来的线型图变成了封闭的面积图咯！
var myArea = d3.svg.area()
.x(function (d,i) {
return scale_x(i)
})
.y0(g_height)
.y1(function(d){
return scale_y(d)
})
.interpolate("cardinal")

d3.select("g")
.append("path")
.attr("d",myArea(data))
.style("fill","blue")

//绘制坐标轴
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)")
.attr("dy","1em")
.attr("text-anchor","end")

运行结果如下：