D3.js area函数

Stella981
• 阅读 489

D3.js area函数

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,price
Jan 2000,300
Apr 2000,400
Jul 2000,500

生成path(数据对应第二个path,小数点已删掉):
M 0,260                移动到左下角(0,260),260是总高度
C 70,239,314,170,455,130    从起点(2,260)画曲线到455,130
S 839,20,910,0            从上点(455,130)画曲线到910,0
L 910,260            画直线到910,260
C 834,260,606,260,455,260    从上点(910,260)画曲线到455,260
S 75,260,0,260Z            从上点(455,260)画曲线到0,260 闭合路径(已经重合)

下面点与上面基本一致,只是起点不是左下角,闭合时起点与终点还未重合
M 0,156
C 731,143,307,103,455,77
S 836,12,910,0
L910,260
C 834,260,606,260,455,260
S75,260,0,260
Z

命令:
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        特殊版本的三次贝塞尔曲线(省略第一个控制点)
点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
2年前
java——20171121
!(http://a.51jsoft.com/uploads/default/original/1X/c542896b094a42a5653fb75adf6cdacd6e35d12e.png)!(https://static.oschina.net/uploads/space/2017/1121/210719_G80Z_3715033.png)
Wesley13 Wesley13
2年前
Java架构图
java5!(http://static.oschina.net/uploads/space/2015/0331/100439_brEa_190049.png)java6!(http://static.oschina.net/uploads/space/2015/0331/100517_74Wu_19
Stella981 Stella981
2年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Wesley13 Wesley13
2年前
LDAP DIT设计参考
Oracle:!(https://static.oschina.net/uploads/space/2018/0402/090541_WUsq_921036.png)IBM:!(https://static.oschina.net/uploads/space/2018/0402/090601_w4ep_92103
Stella981 Stella981
2年前
MapReduce简单使用
1、启动hadoop工程!(http://static.oschina.net/uploads/space/2015/0510/202542_tg2o_1863482.png)(http://static.oschina.net/uploads/space/2015/0510/202542_tg2o_1863482.pn
Stella981 Stella981
2年前
Html5 SVG矢量图像的使用
!(http://static.oschina.net/uploads/space/2015/0814/214834_RVHb_2256215.jpg)!(http://static.oschina.net/uploads/space/2015/0814/214924_2Ios_2256215.jpg)SVG中文参考地址: moz
Wesley13 Wesley13
2年前
MongoDB分片搭建
!(http://static.oschina.net/uploads/space/2015/1021/150555_H4rD_2426299.jpg)(http://static.oschina.net/uploads/space/2015/1021/150555_H4rD_2426299.jpg)·2015年度PG大象会报名地址:http
Stella981 Stella981
2年前
PhoneGap2.9 IOS项目 BUG修复
1:IOS7状态栏覆盖页面问题:前!(http://static.oschina.net/uploads/space/2015/0616/161136_mhiL_152736.jpg)后!(http://static.oschina.net/uploads/space/2015/0616/161136_osKr_152736.jpg)
Stella981 Stella981
2年前
Lucene4.3开发之第九步之渡劫中期(九)
下图是一个典型的Lucene4.X的索引结构图:!(http://static.oschina.net/uploads/space/2014/0221/171646_p8Wt_1417419.jpg)Lucene4.x之后的所有索引格式如下:!(http://static.oschina.net/uploads/space/2014/
Stella981 Stella981
2年前
Python入门教程之安装MyEclipse插件和安装Python环境
!(http://static.oschina.net/uploads/space/2015/0303/121617_wJt9_1444646.jpg)!(http://static.oschina.net/uploads/space/2016/0120/130908_6m1a_1444646.jpg)http://dlwt.c