【d3可视化实战02：理解d3数据驱动的真正含义】的更多相关文章

d3可视化实战02：理解d3数据驱动的真正含义

前文中已经提到,SVG从诞生之初起就可以非常方便地使用javascript脚本语言来进行其DOM对象的控制.当然,控制的方法有很多,有直接控制SVG对象的方法,例如使用原生js:有帮你封装一下图形接口再进行直接控制的js类库,如 Raphaël.但是正如我在第一篇文章中所说,d3作为一个中间型类库还能脱颖而出的重要原因,在于它突破了其他类库的那种直接控制表现层的机制,而采用了对于web图形处理领域较为新颖的数据驱动机制(2011),并获得了极大的成功. 数据驱动的历史 数据驱动编程并不是一个新鲜…

d3可视化实战00：d3的使用心得和学习资料汇总

最近以来,我使用d3进行我的可视化工具的开发已经3个月了,同时也兼用其他一些图表类库,自我感觉稍微有点心得.之前我也写过相关文章,我涉及的数据可视化的实现技术和工具,但是那篇文章对于项目开发而言太浅了.于是想写关于d3进行项目实战的系列文章,就像我之前的angularjs实战系列文章一样把整个开发过程中遇到的各种问题及解决办法梳理成章,以为留存.作为开篇,我还是想先把这段时间来我一直参考的资料做一个整理,并谈一些宏观的体会. 一.前方有坑,注意! ————————————————————————…

d3可视化实战03：神奇的superformula

需求驱动实现 前文讲过了D3的数据驱动机制,中间所举的例子都很简单.例如那个demo里面,绑定的数据是一个简单的数组,实现的图元也仅仅是一堆用SVG画的circle.但是现实世界中我们往往会遇到复杂的需求,例如我就遇到了这样一个需求:数据是一个复杂的对象数组,而与之绑定的图元是一个可变图形.该图形可以根据与他绑定的数据中的具体参数,在圆形.方块.三角之间切换,并且要求过渡自然. 面对这个需求,最直接的做法是把圆形.方块.三角用SVG的<circle>圆形标签,<rect>矩形标签以…

d3可视化实战01：理解SVG元素特性

一. SVG简介 ————————————————————————————————————————————————————————————————— SVG是一种和图像分辨率无关的矢量图形格式,它使用严格的XML语法描述图形内容.关于它,主机位于麻省理工学院的W3c官网有着全面的介绍(http://www.w3.org/Graphics/SVG/). 上面这张图片展示了位图和矢量图的区别.位图是由点构成的,矢量图则是由一些形状元素构成.该图中显示放大位图可以看到点,而放大矢量图看到的仍然是形状.…

d3可视化实战04：事件绑定机制

首先说明,d3支持所有的JS事件——甚至其他代码的自定义事件.这里有一个列表,The MDN Event Reference, 包含了几乎所有浏览器创建的事件类型.大家有需要可以去查看. D3的事件绑定的语法,与jquery等其他类库用起来区别不大,都是object.on( event, listener )的形式.但是在具体实践中,我们经常会遇到给同一个对象绑定多个事件监听器的问题.这里就原生js.jquery和d3分别进行讨论. 一.原生JS的事件绑定 在探讨这个问题之前,我们首先需要看一下…

D3 数据可视化实战 笔记

学习真是件奇妙的事情.这本书我之前都看过,有些的知识点却完全没有印象. 总结:把用到的知识好好研究:平时可以了解其他技术的基础,把相关的资料和难点记录下来. javascript陷阱 1.变量类型 var myName = 'sfp'; typeOf myName; //'String' 2.变量提升 for(var i=0; i<100; i++){ //... } //i在for循环开始之前就有了定义 3.全局命名空间 比较好的做法:只在函数里面声明变量:只声明一个全局对象. var loc…

Pentaho6.1中D3可视化库的集成及数据联动的实现

1.软件环境 操作系统版本:Win 10 64位 可视化图形库:D3 Pentaho版本: biserver-ce-6.1.0.1-196 2.对D3的简单介绍 D3允许你将任意的数据绑定到文档对象模型(DOM),然后运用数据驱动转换到文档上.例如,你可以使用D3将一个数组生成一个HTML表格.或者,使用相同的数据来创建一个有平滑过渡和交互的交互式SVG条形图. D3不是一个旨在提供每一个可能想到的功能的单一框架.相反的,D3所解决的问题的关键是:高效操作基于数据的文档.它提供了显著的灵活性,展…

D3--数据可视化实战总结

d3理解 标签(空格分隔): 未分类 1.绑定数据 [x] 定义:通过循环的方式将数据绑定在dom元素上,每个数据对应一个元素,所以这个数据的值就能来设定dom元素的width,height,x,y坐标等,这就表现了数据驱动的思想,同时也是d3的精华所在. [x] 我们绑定的数据通过匿名函数function(d,i)来调用,数据的值就能设置dom元素的属性. 所有的标签都可以进行绑定,对rect,circle,text,我们想要数据来驱动任何元素,那么就用数据绑定该元素,通过attr()设置x,…

[D3] 12. Basic Transitions with D3

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../bower_components/underscore/underscore-min.js"></script> <script src="../v…

[D3] 10. Creating Axes with D3

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../bower_components/underscore/underscore-min.js"></script> <script src="../v…