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")

运行结果如下：