D3.js area函数
D3.js area函数
横着走的螃蟹 发表于3年前
D3.js area函数
  • 发表于 3年前
  • 阅读 186
  • 收藏 1
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: 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		特殊版本的三次贝塞尔曲线(省略第一个控制点)


共有 人打赏支持
粉丝 13
博文 110
码字总数 28093
×
横着走的螃蟹
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: