- 浏览: 1150798 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (224)
- Web UI (11)
- Dynamic Language (7)
- Framework (9)
- Note & Try (17)
- JavaScript (38)
- Ant/Gant/Maven (2)
- Database (5)
- Software Engineering (13)
- Career (29)
- Team Management (5)
- Performance (12)
- Algorithm (17)
- News & Commets (23)
- System Design (17)
- OO Design (8)
- API Design (3)
- Programming Paradigms (8)
- Asynchronous Programming (5)
- Architecture (6)
最新评论
-
a2320064997:
请问博主,排序的动图是怎么做出来的?
排序算法一览(二):归并类排序、分布类排序和混合类排序 -
你的微笑我得阳光:
试试验证码
reCAPTCHA项目 -
mack:
一般采用json
对象转换的问题 -
fly_hyp:
我也做了一个中文编程软件,叫趣智思成
一些中文编程语言 -
facingSun:
受教了
前端解耦的一个最简单示例
D3.js是一个基于数据的操作文档的JavaScript库,主要用于各异的图表的输出,支持DIV这种图案生成,也支持SVG这种图案的生成(如果你对SVG不熟悉,请先看一下这篇文章,它介绍了SVG、VML和Canvas)。D3帮助你屏蔽了浏览器差异,做出来图案的效果可以说是炫目得一塌糊涂,可是代码却很简洁。在我第一次听人介绍D3的时候,确实被其示例震撼到了,大量的例子在这里可以找到。
这是D3以数据为核心的一个示意图,可以简单这样来解释:有一个选择区(selection),存在若干节点(node),因此可以容纳若干数据(data),最大可容纳数据的量等于节点的个数,即数据和节点一一对应,数据存放到节点中被称为绑定(bound to)。
- 如果节点的数据发生变化,这样的行为叫做update;
- 如果数据数量大于节点的数量,那么有一部分数据放不下了,将产生enter行为;
- 反之,如果数据从节点中取出来,导致节点空闲,这就发生exit的行为。
初始感官认识:
通过下面这个例子,我觉得足够让你明白D3个大概了: d3例子
实现上,存在6个circle的DOM对象:
1
2
3
4
5
6
7
8
|
< svg id = "vis" >
< circle ></ circle >
< circle ></ circle >
< circle ></ circle >
< circle ></ circle >
< circle ></ circle >
< circle ></ circle >
</ div >
|
在点击Datasets不同行的时候,数据的个数一会儿大于6,一会儿小于6,在变化过程中分别触发enter/update和exit/update的行为。可以看到左侧的球在红色边框的区域内进进出出,主要代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
var datasets = [
[80,20,35,48,120,380],
[60,50,80,90,210,440],
[100,80,300,240,20,340,70,40],
[80,30,400]
]; var currentDataset = 0;
var render = function (datasetIndex){
var data = datasets[datasetIndex];
var circles = d3.select( '#vis' ).selectAll( 'circle' );
circles.data(data)
.style( 'fill' , '#1CA2DA' )
.transition()
.duration(800)
.attr( 'r' , 15)
.attr( 'cx' , function (d, i){ return i * 60 + 20; })
.attr( 'cy' , function (d){ return d; });
//update
circles.data(data)
.enter()
.append( 'circle' )
.attr( 'r' , 15)
.attr( 'cx' , 0)
.attr( 'cy' , 0)
.style( 'opacity' , 0)
.style( 'fill' , 'red' )
.transition()
.duration(1000)
.style( 'opacity' , 1)
.attr( 'cx' , function (d, i){ return i * 60 + 20; })
.attr( 'cy' , function (d){ return d; });
//超出容量的数据,enter
circles.data(data)
.exit()
.transition()
.duration(800)
.style( 'opacity' ,0)
.remove();
//离开选择区的数据,exit
}; render(0); var changeDataset = function (d, i){
d3.selectAll( '.dataset' ).attr( 'class' , 'dataset' );
this .setAttribute( 'class' , 'dataset active' );
render( this .getAttribute( 'data-index' ));
}; d3.selectAll( '.dataset' ).on( 'click' , changeDataset);
|
我想如果你习惯阅读JQuery代码,那么这样的代码很容易理解,链式编程的风格,清晰自然。以容器+数据的映射关联关系为核心,有点像状态机,但又不完全像,不同状态下基于其update、enter或者exit的行为绑定动作和状态属性的改变。
进一步介绍:
选择器:用惯了JQuery的话,这个没有什么可说的,比如这样的例子:
1
|
d3.select( '#vis' ).append( 'div' ).style( 'top' , '20px' ).style( 'left' , '20px' );
|
会输出一个绿色的矩形。
动态属性:D3支持这种以function方式传入的属性,这样的属性是动态的,每次执行的时候再去调用计算获得:
1
2
3
|
d3.selectAll( "p" ).style( "color" , function () {
return "hsl(" + Math.random() * 360 + ",100%,50%)" ;
}); |
enter和exit:前文也已经提到了,当数据绑定到选择区对象上的时候,数据的每一个元素都会和选择区对象的每一个节点对应起来,节点内的数据发生变化,就是update;节点内的数据移除,节点空出来,就是exit;数据数量大过节点,造成数据剩余,就是enter。然后就可以基于这个自定义这些事件发生的时候需要进行的行为和变更的状态了:
1
2
3
4
5
6
7
8
9
10
11
|
// Update… var p = d3.select( "body" ).selectAll( "p" )
.data([4, 8, 15, 16, 23, 42])
.text(String);
// Enter… p.enter().append( "p" )
.text(String);
// Exit… p.exit().remove(); |
转换,而非呈现(Transformation, not Representation):D3并不是一个新的图像呈现类库,因此它和Raphaël是不一样的。你可以用D3加上自己定义的CSS来创建SVG图案,浏览器未来的特性也会被D3封装起来给你用,这些事情无非是让你对DOM和其上的数据的操作换了一种形式而已。
过渡(Transitions):这指的是图案从一种状态变化到另一种状态的时候,中间的动画过渡效果。D3支持几种渐变的风格,帧速很高,实际上还是CSS3的渐变,但是对开发人员来说好用多了。
当然,直接拿D3来绘制图表可能会觉得繁琐,如果使用它的扩展就方便多了。
文章系本人原创,转载请注明作者和出处(http://www.raychase.net)
注:本博客已经迁移到个人站点 http://www.raychase.net/ ,欢迎大家访问收藏,本ITEye博客在数日后将不再更新。
评论
发表评论
-
JavaScript 3D图表
2013-08-24 19:36 3075在说3D图表以前,首先要明确两个概念,一个是数据的维度,一个 ... -
几道容易出错的JavaScript题目
2013-07-07 10:34 2216下面这几道JavaScript题目大多来自于周五的一个小分享 ... -
JavaScript使用for循环时出现的问题
2013-05-26 00:36 1616这个问题的讨论最初来自公司内部邮件,我只是把这个问题的讨论内 ... -
DNS劫持
2013-04-30 13:59 2111想谈一谈这个话题是因为最近有一位朋友抱怨他的博客在某些用户某 ... -
你没有抓住Promises的要点
2013-04-21 20:52 2421注:这篇文章翻译自《You're Missing the P ... -
程序员,都去写一写前端代码吧
2013-01-19 01:16 2632你可以认为我是一个极 ... -
用JavaScript截图
2013-01-08 23:13 7588使用JavaScript截图,这里我要推荐两款开源组件: ... -
JQuery表格插件介绍:Flexigrid和DataTables
2012-12-27 11:35 8885JQuery的表格插件有很多。Flexigrid和Dat ... -
Flot介绍
2012-12-22 18:56 2310最近在项目里面要用到JavaScript来绘制图表,JQ ... -
Function Invocation Patterns
2012-11-04 17:46 1327今天看到微博上大家在讨论一个JavaScript的小问题 ... -
Dart,你凭什么挑战JavaScript?
2012-09-26 08:46 5795不妨先来打量一下JavaScript。JavaScrip ... -
Backbone.js介绍
2012-05-08 22:57 4386注:教程请参见这里(本文有很多内容都是从这里翻译的),官方网站 ... -
关于CommonJS
2012-03-26 00:37 17197老实说,之前我对CommonJS也是一无所知,直到不久前Nod ... -
同步、异步转化和任务执行
2012-01-24 22:23 4193正如动静是相对的概念,有了它们,世界才充满盎然生气;变和不变也 ... -
JavaScript实现继承的几种方式
2012-01-07 23:21 12344在这篇文章中,介绍了 ... -
JavaScript重构(十):强化对象封装和模块封装
2011-09-19 22:44 36061、类本身就是一种封装形式,先来看看最简单的封装,JavaSc ... -
JavaScript 的 delete 用法
2011-01-09 11:59 17021、 var o = {}; o.x = new Ob ... -
疯狂的跨域技术
2011-01-09 19:39 2475[转]疯狂的跨域技术 原帖地址:http://itgeeker ... -
服务器端JavaScript
2011-01-11 00:05 1315JSConf2010的重要议题之一:node.js。 不要觉 ... -
JSConf 2010 (一):介绍、Google Chrome Frame 和 GitHub
2011-01-12 00:15 1665一年一度的JSConf大会又召开,这是2010的官网 http ...
相关推荐
作者通过风 趣幽默的语言、简单易懂的示例,由浅入深地介绍了使用 D3 所需的基本技术,以及基于数据 绘图、比例尺、数轴、数据更新、过渡和动画等构建交互式在线图表的核心概念,最后还介绍 了 D3 中常用的布局方法...
资源介绍:。易语言D3D9 1.0模块源码例程程序调用API函数实现Direct3D操作应用。点评:易语言D3D9 1.0模块源码仅供参考。资源作者:。易语言教程网。资源界面:。资源下载:。
因此,以追溯数据可视化历史、分析其技术含量为背景,着重介绍D3这一可视化平台,归纳出D3绘制五种图表的强大功能,用具体的条形图绘制案例说明D3的语法要求与使用方法,并通过交叉筛选器展示D3的广泛实用性.由此认为,D3...
【介绍】 D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准,可以不需要其他任何框架独立运行在现代浏览器中,它结合强大的可视...
该文件是对 d3dx9_41.dll Dll的简介 运行环境:WinXp/2003/2000/Nt/Me/9x/Vista/ 软件语言:简体中文 软件类型:系统文件 授权方式: 软件大小:3.98M 推荐星级: 更新时间: 联系方式: 官方主页: 图片预览: ...
【介绍】 D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准,可以不需要其他任何框架独立运行在现代浏览器中,它结合强大的可视...
第 2章,精挑细选,向你介绍了D3数字可视化中最基本的一项操作——选集。选集可以帮助读者定位页面上的元素。 第3章,与数据同行,探索了任何数据可视化程序中都会涉及的基础问题——如何通过程序构造、可视化效果...
趣幽默的语言、简单易懂的示例,由浅入深地介绍了使用D3 所需的基本技术,以及基于数据 绘图、比例尺、数轴、数据更新、过渡和动画等构建交互式在线图表的核心概念,最后还介绍 了D3 中常用的布局方法和创建地图等...
D3D游戏开发编程基础,介绍D3D SDK中各种类和函数,含各种编程范例
这是一本介绍D3的书籍,可以让人初步了解数据可视化的一些JS库。
D3D设计介绍 运用directX进行windows编程
本教程理论与实践结合,力图向读者全方位地展示 D3 大数据可视化技术,帮助读者快速利用 D3 ...本教程由浅入深,首先介绍了一些 D3 数字可视化编程中的基本概念,继而通过一些代码样例,对 D3 的其他特性做逐一展示。
适合学习d3d的同学们,比较基础,3d概念,向量,点,面,顶点,索引,纹理,shader都有基础介绍
v4版本的D3js源码和Api已经齐全的demo,详细的api介绍和实例。以代码齐全;
介绍 如何搭建D3.js的开发环境, D3中的各种操作(数据映射、坐标轴组件、动画过度效果、制作地图、绘制图表、可视化交互、SVG 相关介绍等)。
面向编码员和分析师的 d3.js:介绍 日程 第 1 节(2 小时) 介绍 演示 / 兴奋 SVG 概览(DOM 是一个场景图) D3 介绍:让我们改变 DOM 选择器 过渡和动画 第 2 节(1.5 小时) 设置服务器,加载数据 数据绑定...
使用D3.js库进行数据可视化的技术介绍。
软件介绍: 如果你的电脑在玩游戏时提示错误:“错误提示找不到d3d8.dll”“客户端不能正常启动”的问题,你用这个工具就可以进行修复了。步骤如下:将下载的文件解压,双击运行“修复DLL.bat”,运行后会出现...
D3D初级教程电子书与源代码,书中介绍了一些D3D的基础知识与相关数学知识,是新手学习的好资料