文档章节

D3.js area函数

横着走的螃蟹
 横着走的螃蟹
发布于 2015/04/02 11:07
字数 449
阅读 225
收藏 1

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


© 著作权归作者所有

共有 人打赏支持
横着走的螃蟹
粉丝 15
博文 151
码字总数 36230
作品 0
朝阳
高级程序员
私信 提问
剖析 D3.js 中的 this 相关

前言 D3.js作为著名的数据可视化框架,在自定义图表领域是无可争议的No.1。使用频率最高的api当属,因此它被称为"svg界的jquery"(目前已经支持canvas)。jquery中有,那么D3.js中当然也有。比如...

ssssyoki
2018/10/29
0
0
将 React、D3 及其生态系统相互融合

React 和 D3.js 是能帮助我们处理页面元素及其所带来的挑战的伟大工具。它们当然可以一起工作,我们被赋予了在两个工具的界限之间去选择的能力。 —— 本文作者 马克思.西亚斯 自从2011年问世...

oschina
2018/07/09
638
0
D3.js的v5版本入门教程(第五章)—— 选择、插入、删除元素

D3.js的v5版本入门教程(第五章) 1、选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的中有三个 ,如下 dog 选择第一个元素 var ...

qq_34414916
2018/04/22
0
0
d3.js学习笔记(未完待续)

d3.js和jQuery一样,是链式语法。 d3.js常用方法: 1. d3.select():使用CSS选择器语法从DOM中选择单一元素。 如:d3.select("body"); 2. d3.selectAll():选择所有符合要求的元素。 如:d3....

小微
2013/03/15
0
5
可视化前端初探(一)--D3.js

一.D3.js 概述 1.D3 是什么 D3 的全称是(Data-Driven Documents),翻译过来就是一个被数据驱动的文档。简而言之,就是一个主要是用来做数据可视化的 JavaScript 的函数库。由于它本质上是 ...

nightzing
2017/12/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

IDE 插件新版本发布,开发效率 “biu” 起来了

近日,Cloud Toolkit正式推出了面向 IntelliJ 和 Eclipse 两个平台的新款插件,本文挑选了其中三个重大特性进行解读,点击文末官网跳转链接,可查看详细的版本说明。 本地应用一键部署到任何...

阿里云云栖社区
31分钟前
6
0
金丝雀发布、滚动发布、蓝绿发布到底有什么差别?关键点是什么?

根据 2017 年的 DevOps 发展报告,高效能组织和低效能组织在软件交付的效率上有数量级上的差异。技术组织的软件交付能力是一种综合能力,涉及众多环节,其中发布是尤为重要的环节。 作为技术...

问题终结者
59分钟前
3
0
Kubernetes Client-go Informer 源码分析

几乎所有的Controller manager 和CRD Controller 都会使用Client-go 的Informer 函数,这样通过Watch 或者Get List 可以获取对应的Object,下面我们从源码分析角度来看一下Client go Informe...

阿里云官方博客
今天
4
0
传统IDC部署网站(三)

11. 重置密码 密钥和密码都支持远程登陆, 二选一 两个都可以登陆, 密钥相对于密码来说,相对安全一点 本地登陆无法是用密钥 修改密码 root 用户 passwd root 修改普通用户 passwd usernam...

miko0089
今天
6
0
bash特性

1.支持别名 alias 2.命令替换 $(COMMANS) 或者 `COMMAND` 3. bash支持的引号: `` :命令替换 "":弱引用,可以实现变量替换 '':强引用,不实现变量替换 4.文件名通配 globbing:(man 7 glo...

忙碌的小蜜蜂
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部