文档章节

D3.js area函数

横着走的螃蟹
 横着走的螃蟹
发布于 2015/04/02 11:07
字数 449
阅读 213
收藏 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		特殊版本的三次贝塞尔曲线(省略第一个控制点)


© 著作权归作者所有

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

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

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

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

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

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

qq_34414916
04/22
0
0
可视化前端初探(一)--D3.js

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

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

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

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

没有更多内容

加载失败,请刷新页面

加载更多

Mariadb二进制包安装,Apache安装

安装mariadb 下载二进制包并解压 [root@test-a src]# wget https://downloads.mariadb.com/MariaDB/mariadb-10.2.6/bintar-linux-glibc_214-x86_64/mariadb-10.2.6-linux-glibc_214-x86_64.t......

野雪球
今天
3
0
ConcurrentHashMap 高并发性的实现机制

ConcurrentHashMap 的结构分析 为了更好的理解 ConcurrentHashMap 高并发的具体实现,让我们先探索它的结构模型。 ConcurrentHashMap 类中包含两个静态内部类 HashEntry 和 Segment。HashEnt...

TonyStarkSir
今天
3
0
大数据教程(7.4)HDFS的java客户端API(流处理方式)

博主上一篇博客分享了namenode和datanode的工作原理,本章节将继前面的HDFS的java客户端简单API后深度讲述HDFS流处理API。 场景:博主前面的文章介绍过HDFS上存的大文件会成不同的块存储在不...

em_aaron
昨天
4
0
聊聊storm的window trigger

序 本文主要研究一下storm的window trigger WindowTridentProcessor.prepare storm-core-1.2.2-sources.jar!/org/apache/storm/trident/windowing/WindowTridentProcessor.java public v......

go4it
昨天
7
0
CentOS 生产环境配置

初始配置 对于一般配置来说,不需要安装 epel-release 仓库,本文主要在于希望跟随 RHEL 的配置流程,紧跟红帽公司对于服务器的配置说明。 # yum update 安装 centos-release-scl # yum ins...

clin003
昨天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部