使用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 ...
随机推荐
- 【简易版】IOS仿periscope自制狂赞飘桃心
periscope自制狂赞飘桃心 国外的IOS app“periscope”非常的火,观看手机视频直播的时候,点击屏幕任何一个地方,屏幕右下角就能飘出各种颜色的桃心,效果非常的炫! 为此我自制了一个仿 ...
- Eclipse较为常用快捷键
今天在学习Eclipse的使用时,Mark了一些较为常用的快捷键,拿出来和大家分享一下: Ctrl+1 快捷修复 Ctrl+D 快捷删除行 Shift+Enter 在当前行任意位置光标跳转到下一行 C ...
- POJ1155TELE[树形背包]
TELE Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 4957 Accepted: 2726 Description ...
- 第30课 Qt中的文本编辑组件
1. 3种常用的文本编辑组件的比较 单行文本支持 多行文本支持 自定义格式支持 富文本支持 QLineEdit (单行文本编辑组件) Yes No No No QPlainTextEdit (多行普通 ...
- 搞netty
开始搞netty了 查了下资料 在使用NIO 的时候,最好不要配置 SO_LINGER,假设设置了该參数,在 close的时候如缓冲区有数据待写出,会抛出 IOException. // 在netty ...
- guava函数式编程
[Google Guava] 4-函数式编程 原文链接 译文链接 译者:沈义扬,校对:丁一 注意事项 截至JDK7,Java中也只能通过笨拙冗长的匿名类来达到近似函数式编程的效果.预计JDK8中会有所 ...
- [No000029]程序员的那些事儿 -- 皆大欢喜的加薪
我的朋友A君是个典型的.NET开发人员,技术不错,人品也不错,在一家小公司(姑且称为甲公司)做项目开发,是技术骨干. 3个月前,他找到我说想跳槽,让我帮忙介绍工作.我说为什么想跳了? 1. 为什么想离 ...
- hdu 1542 & & poj 1151
Atlantis Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total S ...
- Android RecyclerView 动画展开item显示详情
stackoverflow上看到这个问题,答主给了个demo http://stackoverflow.com/questions/27446051/recyclerview-animate-item ...
- Android图片异步加载框架Android-Universal-Image-Loader
版权声明:本文为博主原创文章,未经博主允许不得转载. Android-Universal-Image-Loader是一个图片异步加载,缓存和显示的框架.这个框架已经被很多开发者所使用,是最常用的几个 ...