博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
D3.js area函数
阅读量:6171 次
发布时间:2019-06-21

本文共 1126 字,大约阅读时间需要 3 分钟。

hot3.png

110259_Cfoo_861926.png

var area = d3.svg.area().interpolate("monotone").x(function(d) { return x(d.date); }).y0(260).y1(function(d) { return y(d.price); });    //.x()数据点在x轴的坐标d.date    //.y1数据点在y轴的坐标d.price,这两个值确定一个数据点的坐标(数值)    //.y0相当于转换器[0,260],把y1的值映射到[0-260](像素)显示出来    //area函数的作用就是把这些孤立的点画成一个闭合区域,生成一个path    //interpolate("monotone")这里使用贝塞尔曲线画区域故用插值法数据:date,priceJan 2000,300Apr 2000,400Jul 2000,500生成path(数据对应第二个path,小数点已删掉):M 0,260				移动到左下角(0,260),260是总高度C 70,239,314,170,455,130	从起点(2,260)画曲线到455,130S 839,20,910,0			从上点(455,130)画曲线到910,0L 910,260			画直线到910,260C 834,260,606,260,455,260	从上点(910,260)画曲线到455,260S 75,260,0,260Z			从上点(455,260)画曲线到0,260 闭合路径(已经重合)下面点与上面基本一致,只是起点不是左下角,闭合时起点与终点还未重合M 0,156C 731,143,307,103,455,77S 836,12,910,0L910,260C 834,260,606,260,455,260S75,260,0,260Z命令:M     移动到(moveTo)    x,y    开始点坐标Z    闭合路径(closepath)    将路径的开始和结束点用直线连接L    直线(lineTo)    x,y    当前节点到指定(x,y)节点,直线连接H    水平直线    x    保持当前点的y坐标不变,x轴移动到x,形成水平线V    垂直直线    y    保持当前点的x坐标不变,y轴移动到y,形成垂直线C    x1 y1, x2 y2, x y  画笔从【当前的点X0,Y0】绘制一段三次贝塞尔曲线到点(x,y)S    x2 y2, x y		特殊版本的三次贝塞尔曲线(省略第一个控制点)

转载于:https://my.oschina.net/lantianbaiyun/blog/395030

你可能感兴趣的文章
Supported plattforms
查看>>
做自己喜欢的事情
查看>>
CRM安装(二)
查看>>
Eclipse工具进行Spring开发时,Spring配置文件智能提示需要安装STS插件
查看>>
NSURLCache内存缓存
查看>>
jquery click嵌套 事件重复注册 多次执行的问题
查看>>
Dev GridControl导出
查看>>
开始翻译Windows Phone 8 Development for Absolute Beginners教程
查看>>
Python tablib模块
查看>>
站立会议02
查看>>
Windows和Linux如何使用Java代码实现关闭进程
查看>>
0428继承性 const static
查看>>
第一课:从一个简单的平方根运算学习平方根---【重温数学】
查看>>
NET反射系统
查看>>
Oracle12C本地用户的创建和登录
查看>>
使用JS制作一个鼠标可拖的DIV(一)——鼠标拖动
查看>>
HDU problem 5635 LCP Array【思维】
查看>>
leetcode10. 正则表达式匹配
查看>>
redis常用命令--zsets
查看>>
springcloud--Feign(WebService客户端)
查看>>