文档章节

D3.js area函数

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


© 著作权归作者所有

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

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

ssssyoki
02/06
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
d3.js学习笔记(未完待续)

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

小微
2013/03/15
0
5

没有更多内容

加载失败,请刷新页面

加载更多

【挑战剑指offer】系列03:逆序打印单链表

本系列的算法原题来自于“牛客网-剑指offer”,写这个板块,不仅仅是解决算法问题本身,更是手动提高难度、自行变式,思考更多的解决方案,以带给自己一些启发。 1. 【逆序打印单链表】原始题...

LinkedBear
4分钟前
0
0
Linux内存布局

今天这篇文章主要是我之前看Linux内核相关知识和博客Gustavo Duarte中。我主要是看了这篇博客,并且结合之前的知识,对内存管理的的理解又上升了一个档次。所以想通过这篇文章总结下。 我们先...

linuxprobe16
22分钟前
0
0
day94-20180921-英语流利阅读-待学习

记录死亡还是消费死者?自杀报道的媒体偏见 雪梨 2018-09-21 1.今日导读 自杀事件报道一直是新闻报道的重要部分,具有骇人听闻、吸引眼球的特点。可是在报道这些事件的时候,除了客观陈述事实...

飞鱼说编程
29分钟前
2
0
如何通过 J2Cache 实现分布式 session 存储

做 Java Web 开发的人多数都会需要使用到 session (会话),我们使用 session 来保存一些需要在两个不同的请求之间共享数据。一般 Java 的 Web 容器像 Tomcat、Resin、Jetty 等等,它们会在...

红薯
今天
3
0
C++ std::thread

C++11提供了std::thread类来表示一个多线程对象。 1,首先介绍一下std::this_thread命名空间: (1)std::this_thread::get_id():返回当前线程id (2)std::this_thread::yield():用户接口...

yepanl
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部