使用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.效果图
使用D3绘制图表(4)--面积图表的更多相关文章
- [Swift通天遁地]三、手势与图表-(13)制作美观简介的滚动图表:折线图表、面积图表、柱形图表、散点图表
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 使用D3绘制图表(7)--饼状图
这次是绘制饼状图,也是这一次使用D3绘制图表的最后一篇,大家可以从其他地方深入学习D3绘制图表,也可以直接查看D3的API进行学习,本次绘制饼状图的数据跟之前的卸载数组里面的不一样,这一次是使用d3的 ...
- 使用D3绘制图表(2)--绘制曲线
上一篇是使用D3绘制画布,这一篇的内容是在画布上绘制曲线. 1.之前的html代码没有变化,但是我还是贴出来 <!DOCTYPE html> <html> <head&g ...
- 13个JavaScript图表(JS图表)图形绘制插件【转】
现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容 ...
- 【转】13个JavaScript图表(JS图表)图形绘制插件
现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容 ...
- Highmaps网页图表教程之图表配置项结构与商业授权
Highmaps网页图表教程之图表配置项结构与商业授权 Highmaps图表配置项结构 Highmaps最核心的部分就是图表配置项.用户通过图表配置项来对标题进行定制,从而实现自己所要的效果.所以,掌 ...
- Excel 插入嵌入式图表和独立图表的方法
描述 嵌入式图表:是一种与当前工作表相同位置的图表,且悬浮在表格之上,不受表格限制,因此称之为嵌入式图表. 独立图表:是独立于当前工作表的图表,打印时,需要单独将其打印出来. 插入独立图表的图文教程: ...
- 使用D3绘制图表(6)--竖直柱状图表
竖直柱状图的绘制是在水平柱状图的基础上修改的. 1.html代码 <!DOCTYPE html> <html> <head> <meta charset=&q ...
- 使用D3绘制图表(5)--水平柱状图表
绘制水平柱状图表的方法也不是很难,首先在svg中插入g,然后在g中插入rect. 1.html代码 <!DOCTYPE html> <html> <head> &l ...
随机推荐
- AC日记——字符替换 openjudge 1.7 08
08:字符替换 总时间限制: 1000ms 内存限制: 65536kB 描述 把一个字符串中特定的字符全部用给定的字符替换,得到一个新的字符串. 输入 只有一行,由一个字符串和两个字符组成,中间用 ...
- SpringMVC学习系列-后记 解决GET请求时中文乱码的问题
SpringMVC学习系列-后记 解决GET请求时中文乱码的问题 之前项目中的web.xml中的编码设置: <filter> <filter-name>CharacterEnc ...
- java 28 - 5 JDK5的新特性 之 枚举的使用
上一章,自定义了枚举类,超级麻烦.. 所以,JAVA给了一个枚举类:类 Enum<E extends Enum<E>> 注意事项 定义枚举类要用关键字enum 所有枚举类都是E ...
- curl 工具收集
注意:curl 目标地址不能使用 0.0.0.0: port, 这样会curl返回结果显示不正常: 实际上有返回,但是curl提示没有数据.
- MVC 数据验证【转】
[转自]http://www.cnblogs.com/dozer/archive/2010/04/12/MVC-DataAnnotations.html 作者Dozer 今天在这里给大家介绍一下MVC ...
- Oracle 使用MERGE INTO 语句更新数据
/*Merge into 详细介绍MERGE语句是Oracle9i新增的语法,用来合并UPDATE和INSERT语句.通过MERGE语句,根据一张表或子查询的连接条件对另外一张表进行查询,连接条件匹配 ...
- background-origin 设置背景图片原始起始位置
- AIO 简介
from:http://blog.chinaunix.net/uid-11572501-id-2868654.html Linux的I/O机制经历了一下几个阶段的演进: 1. 同步阻塞I/O: 用 ...
- FJOI省队集训 florida
省队成员(大部分)都没来...像我这种沙茶天天写写玄学算法都能排在榜上面...果然正解写挂的人远比暴力拍对的人少啊...陆陆续续会补一些题解.(不过有些题太神了可能补不上题解 有n个物品,两个袋子A和 ...
- DefaultFilesMiddleware中间件如何显示默认页面
DefaultFilesMiddleware中间件如何显示默认页面 DefaultFilesMiddleware中间件的目的在于将目标目录下的默认文件作为响应内容.我们知道,如果直接请求的就是这个默认 ...