d3.js入门教程之数据绑定详解


Posted in Javascript onApril 28, 2017

前言

d3.js 是一款上手容易的js类库,专门用于绘制svg图形图表,其关键理念为data-join 意即数据绑定.搞清这个概念非常重要,它将以简洁优雅的形式体现数据驱动编程.

以下是Thinking with Joins的拙译 ,原作者Mike Bostock

假设你要用D3画一副散点图,因此需要生成一些 SVG circle 元素来直观地展现数据. 你会惊讶地发现D3没有提供原生的产生多个DOM元素的接口,

是的,只有一个 append 方法,用于产生单个DOM元素:

svg.append("circle") 
 .attr("cx", d.x) 
 .attr("cy", d.y) 
 .attr("r", 2.5);

但那只是单个圆,而你想要更多: 最好data*中每个元素对应一个圆. 在你用蛮力写循环把圆画出来之前,让我们看看D3中的一个例子:

svg.selectAll("circle") 
 .data(data) 
 .enter().append("circle") 
 .attr("cx", function(d) { return d.x; }) 
 .attr("cy", function(d) { return d.y; }) 
 .attr("r", 2.5);

*此处 data是一个 JSON 数组,其每个元素 由 x 和 y属性构成, 例如: [{"x": 1.0, "y":1.1},{"x": 2.0, "y":2.5}, …]. 另,SVG circle元素用cx,cy表达圆心坐标,r表达半径长度.

这份代码符合你的需求,即每个元素产生一个圆 , 通过x和y属性表达圆心的坐标.

selectAll("circle")是什么意思,为什么要在产生所有圆之前去选中根本不存在的元素呢?

原来事情是这样的:告诉D3你的目标,而不要告诉它具体怎么做. 在这个例子中,D3知道我们的意图是,要让选中的"circle"元素来响应数据的变化, selectAll即描述了这个目标;而无需一步步指挥D3产生多个圆.这个概念即data-join.

data-join的背后执行了以下步骤:

  • selectAll("circle") 返回了一个空的选择
  • 空的选择通过 data()方法将数据和DOM元素绑定,并产生三个虚拟的子集: enter, update and exit. enter()方法包含了待添加的数据及相应的DOM元素的占位符;update()包含了已与数据绑定的现有元素.剩下待移除的部分被包含在 exit ()方法中
  • 一开始选择的结果是空的,因此所有数据都是待添加,将全部出现在enter的结果中.
  • 无需循环,通过.enter().append("circle")将待添加的元素一次性加入到SVG容器.

为什么要这么麻烦呢? 为什么不直接提供原生接口? data-join的优雅之处在于抽象和解耦.上述代码在enter()里只是专心处理新增的元素,而update and exit分别专注于处理更新和待删除部分.这意味着你不用把所有DOM元素删了重绘,因此得以轻松应对实时变化的数据,甚至支持一些交互(如拖动)与渐变的效果!

这里是一个处理三种状态(增改删)的例子:

var circle = svg.selectAll("circle") 
 .data(data); 
 
circle.enter().append("circle") 
 .attr("r", 2.5); 
 
circle 
 .attr("cx", function(d) { return d.x; }) 
 .attr("cy", function(d) { return d.y; }); 
 
circle.exit().remove();

如果我们重复运行代码,它会每次重新计算 data-join. 如果新的数据集比原来的少,多余元素会出现在 exit 中并被remove()删除.反之亦然,新增的数据出现在enter()中通过append()添加DOM元素.若新老数据集大小不变,则所有数据只是更新坐标.(译注:上文中介于enter和exit之间的代码,update()会被隐式调用)

以joins的方式思考同时让你的代码更直观: 处理这三种状态的代码无需条件(if)和循环(for)分支,只需简单描述让图形去响应数据的变化即可.如果给定的enter, update 或 exit 的选择结果为空,则会自动跳过相应的代码块,以降低性能开销.

Joins 支持在特定状态(增/删/改)下执行操作.例如,可以在enter而非update代码块中,指定静态的attributes(例如圆的半径,用 "r" attribute指定) . 仰赖于精确改动目标元素和最小化DOM变更,你已经极大地提升了浏览器渲染的表现! 类似地,你可以在特定状态下表现渐变等动画效果. 例如新增的圆可以从无到有渐变(半径从0到2.5):

circle.enter().append("circle") 
 .attr("r", 0) 
 .transition() 
 .attr("r", 2.5);

待删除的圆也可以逐渐收缩直至消失:

circle.exit().transition() 
 .attr("r", 0) 
 .remove();

相信现在你已经学会用joins的方式思考了!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js下用gb2312编码解码实现方法
Dec 31 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
javascript中String类的subString()方法和slice()方法
May 24 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
js实现简单排列组合的方法
Jan 27 Javascript
javascript模块化简单解析
Apr 07 Javascript
微信小程序 引用其他js文件实现代码
Feb 22 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
jQuery tip提示插件(实例分享)
Apr 28 #jQuery
JS实现动态添加DOM节点和事件的方法示例
Apr 28 #Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 #jQuery
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 #Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 #Javascript
d3.js实现立体柱图的方法详解
Apr 28 #Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 #Javascript
You might like
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
简单介绍Python中的len()函数的使用
2015/04/07 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
python事件驱动event实现详解
2018/11/21 Python
Python中调用其他程序的方式详解
2019/08/06 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
网络教育毕业生自我鉴定
2013/10/10 职场文书
农民工创业典型事迹
2014/01/25 职场文书
初级党校心得体会
2014/09/11 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
Python集合set()使用的方法详解
2022/03/18 Python