使用D3绘制图表(4)--面积图表

时间:2022-01-30 20:10:08

  面积图表的绘制就是在曲线图表的基础上做一点小小的改动。其他的代码跟绘制曲线图表没有什么区别,下面有黄色背景颜色的代码就是修改的,是不是很简单,第一句修改的地方就是把之前绘制线的函数(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.效果图

使用D3绘制图表(4)--面积图表