文档章节

D3.js area函数

横着走的螃蟹
 横着走的螃蟹
发布于 2015/04/02 11:07
字数 449
阅读 196
收藏 1
点赞 0
评论 0

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
博文 119
码字总数 29165
作品 0
朝阳
高级程序员
可视化前端初探(一)--D3.js

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

nightzing ⋅ 2017/12/14 ⋅ 0

D3.js的v5版本入门教程(第五章)—— 选择、插入、删除元素

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

qq_34414916 ⋅ 04/22 ⋅ 0

d3.js学习笔记(未完待续)

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

小微 ⋅ 2013/03/15 ⋅ 5

图形数据库Neo4j从入门到精通(含Neo4j+D3.js完整实战项目开发)

图形数据库Neo4j从入门到精通(含Neo4j+D3.js完整实战项目开发) 分享网盘地址——https://pan.baidu.com/s/1dFNFTZF 密码: hmge 图数据库是目前大数据领域最火热的方向,Neo4j则是图数据库中...

人气王子333 ⋅ 2017/11/08 ⋅ 0

2D 图表库--Function Plot

Function Plot 是一个基于 D3.js 开发的 2D 图表库,用来绘制各种函数图。 示例代码: functionPlot({ title: 'y = x * x', target: '#linear-with-options', width: 580, height: 400, disa......

红薯 ⋅ 2015/04/13 ⋅ 0

d3.js学习笔记--Mike Bostock: VIZBI: D3 Workshop

Preface d3是基于HTML和SVG的数据可视化JS库. 它将数据(data)和元素(DOM)相互绑定在一起, 并且在数据实时改变情况下DOM元素也会实时改变. 所以, D3是Data-Driven Documents, 即数据驱动元素,...

fzyz_sb ⋅ 2016/10/23 ⋅ 0

声明式编程和命令式编程的比较

先统一一下概念,我们有两种编程方式:命令式和声明式。 我们可以像下面这样定义它们之间的不同: 命令式编程:命令“机器”如何去做事情(how),这样不管你想要的是什么(what),它都会按照你...

oschina ⋅ 2013/06/27 ⋅ 25

C3.js 0.4.10 发布,开源图表库

C3.js 0.4.10 发布,此版本包括一些新特性,bug 修复和性能提升,现已提供下载:src="https://github.com/masayuki0812/c3/archive/0.4.10.zip" href="https://github.com/masayuki0812/c3/...

oschina ⋅ 2015/03/18 ⋅ 6

[转]Popular open source JavaScript frameworks for data visualisation

Popular open source JavaScript frameworks for data visualisation Today’s enterprises collect more data than ever, but before they can be leveraged, these large data sets must b......

thomaslwq ⋅ 01/11 ⋅ 0

JavaScript可交互性图表--NVD3.js

NVD3.js是一个基于D3.js的开源图表JavasScript 类库,它可生成具有交互性的图表,定制性也非常高。它可用于绘制线性图、柱状图、饼图等多种常见的图表类型。它的使用方法也非常简单,如果你正...

bear256 ⋅ 2014/07/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

容器之重命名镜像

使用docker tag命令来重命名镜像名称,先执行help,查看如何使用如下 mjduan@mjduandeMacBook-Pro:~/Docker % docker tag --helpUsage:docker tag SOURCE_IMAGE[:TAG] TARGET_IMAGE[:TA...

汉斯-冯-拉特 ⋅ 8分钟前 ⋅ 0

with 的高级用法

那么 上下文管理器 又是什么呢? 上下文管理器协议包含 __enter__ 和 __exit__ 两个方法。with 语句开始运行时,会在上下文管理器对象上调用 __enter__ 方法。with 语句运行结束后,会在上下...

阿豪boy ⋅ 27分钟前 ⋅ 0

使用 jsoup 模拟登录 urp 教务系统

需要的 jsoup 相关 jar包:https://www.lanzous.com/i1abckj 1、首先打开教务系统的登录页面,F12 开启浏览器调试,注意一下 Request Headers 一栏的 Cookie 选项,我们一会需要拿这个 Cook...

大灰狼时间 ⋅ 27分钟前 ⋅ 0

关于线程的创建

转自自己的笔记: http://note.youdao.com/noteshare?id=87584d4874acdeaf4aa027bdc9cb7324&sub=B49E8956E145476191C3FD1E4AB40DFA 1.创建线程的方法 Java使用Thread类代表线程,所有的线程对......

MarinJ_Shao ⋅ 39分钟前 ⋅ 0

工厂模式学习

1. 参考资料 工厂模式-伯乐在线 三种工厂-思否 深入理解工厂模式 2. 知识点理解 2.1 java三种工厂 简单工厂 工厂模式 抽象工厂 2.2 异同点 逐级复杂 简单工厂通过构造时传入的标识来生产产品...

liuyan_lc ⋅ 51分钟前 ⋅ 0

Java NIO

1.目录 Java IO的历史 Java NIO之Channel Java NIO之Buffer Java NIO之Selector Java NIO之文件处理 Java NIO之Charset Java 可扩展IO 2.简介 “IO的历史”讲述了Java IO API从开始到现在的发...

士别三日 ⋅ 55分钟前 ⋅ 0

[Err] ORA-24344: success with compilation error

从txt文本复制出创建function的脚本,直接执行,然后报错:[Err] ORA-24344: success with compilation error。 突然发现脚本的关键字,居然不是高亮显示。 然后我把脚本前面的空格去掉,执行...

wenzhizhon ⋅ 今天 ⋅ 0

Spring Security授权过程

前言 本文是接上一章Spring Security认证过程进一步分析Spring Security用户名密码登录授权是如何实现得; 类图 调试过程 使用debug方式启动https://github.com/longfeizheng/logback该项目,...

hutaishi ⋅ 今天 ⋅ 0

HAProxy基于KeepAlived实现Web高可用及动静分离

前言 软件负载均衡一般通过两种方式来实现: 基于操作系统的软负载实现 基于第三方应用的软负载实现 LVS是基于Linux操作系统实现的一种软负载,而HAProxy则是基于第三方应用实现的软负载。 ...

寰宇01 ⋅ 今天 ⋅ 0

微软自研处理器的小动作:已经开始移植其他平台的工具链

微软将 Windows 10 、Linux 以及工具链如 C/C++ 和 .NET Core 运行时库、Visual C++ 2017 命令行工具、RyuJIT 编辑器等移植到其自主研发的处理器架构 E2。微软还移植了广泛使用的 LLVM C/C++...

linux-tao ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部