在【选择集与数据 - 4】一文中,介绍了一个update、enter、exit的处理模板,这个模板很常用,本文将通过一个例子来讲解其使用方法。

1. 模板

复习一下上一章提到的模板。

		//绑定数据后,分别返回update、enter、exit部分
var update = selection.data(dataset);
var enter = update.enter();
var exit = update.exit(); //1.update部分的处理方法
update.text( function(d){ return d; } ); //2.enter部分的处理方法
enter.append("p")
.text( function(d){ return d; } ); //3.exit部分的处理方法
exit.remove();

2. 应用模板的场合

当数据需要更新(添加、删除、变更)的时候,要想起此模板。

3. 应该该模板的柱形图

下面制作一个柱形图,用于理解更新数据与使用该模板的好处。柱形图的数据有时候需要更新,更新后柱形图也需要跟着变化。例如将数据排序、增加新的数据等,都需要柱形图跟着变化。在这里只绘制柱形图的矩形和文字,不绘制坐标轴,然后再添加两个按钮,用于更新数据。将绘制图形的代码写在一个函数draw()里,当数据发生更新时,再次调用此函数即可。

function draw(){
//获取矩形的update部分
var updateRect = svg.selectAll("rect")
.data(dataset); //获取矩形的enter部分
var enterRect = updateRect.enter(); //获取矩形的exit部分
var exitRect = updateRect.exit(); //1. 矩形的update部分的处理方法 //2. 矩形的enter部分的处理方法 //3. 矩形的exit部分的处理方法 //获取文字的update部分
var updateText = svg.selectAll("text")
.data(dataset); //获取文字的enter部分
var enterText = updateText.enter(); //获取文字的exit部分
var exitText = updateText.exit(); //1. 文字的update部分的处理方法 //2. 文字的enter部分的处理方法 //3. 文字的exit部分的处理方法
}

上述模板中,分别获取矩形和文字的update、enter、exit三个部分。然后再分别对三个部分进行相应的处理。下面以矩形为例,来讲解怎么样分别处理。代码如下:

//1. 矩形的update部分的处理方法
updateRect.attr("fill","steelblue") //设置颜色为steelblue
.attr("x", function(d,i){ //设置矩形的x坐标
return padding.left + i * rectStep;
})
.attr("y", function(d){ //设置矩形的y坐标
return height- padding.bottom - d;
})
.attr("width",rectWidth) //设置矩形的宽度
.attr("height",function(d){ //设置矩形的高度
return d;
}); //2. 矩形的enter部分的处理方法
enterRect.append("rect")
.attr("fill","steelblue") //设置颜色为steelblue
.attr("x", function(d,i){ //设置矩形的x坐标
return padding.left + i * rectStep;
})
.attr("y", function(d){ //设置矩形的y坐标
return height- padding.bottom - d;
})
.attr("width",rectWidth) //设置矩形的宽度
.attr("height",function(d){ //设置矩形的高度
return d;
}); //3. 矩形的exit部分的处理方法
exitRect.remove();

update部分的处理方法是更新属性,enter部分的处理方法是添加元素后再赋予其相应的属性,exit部分的处理方法则是删除掉多余的元素。这么处理之后,对于原数组dataset,无论是排序还是增减数据,图表都能够自动发生相应变化。下面在HTML中分别添加两个按钮,一个用于排序,一个用于增加数据。在HTML中的里添加以下两个按钮:

<button type="button">排序</button>
<button type="button">增加数据</button>

给两个按钮的定义了两个事件函数,但单击事件发生时,分别调用mysort()和myadd()。这两个函数的实现很简单,只要将数据处理后,再调用一次draw()重绘一次即可。

function mysort(){
dataset.sort(d3.ascending); //排序
draw();
} function myadd(){
dataset.push( Math.floor(Math.random() * 100) ); //添加一个项
draw();
}

添加按钮之后,结果下所示:

由于边界有限,增加多个数据后矩形会在边界之外,但是不妨碍本文要表达的意思。

源代码可打开下面网址后,右键查看源代码:

http://www.ourd3js.com/demo/template.html

谢谢阅读。

文档信息

【 D3.js 选择集与数据详解 — 5 】 处理模板的应用的更多相关文章

  1. 【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据

    选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理, ...

  2. 【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板

    绑定数据之后,选择集分为三部分:update.enter.exit.这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板. 1. enter的处理方法 如果没有足够的元素,那么处理 ...

  3. 【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序

    data() 函数有两个参数,第一个是被绑定数据,第二个参数用于指定绑定的顺序.在数据需要更新的时候常常会用到. 默认的情况下,data()函数是按照索引号依次绑定数组各项的.第0个元素绑定数组的第0 ...

  4. 【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据

    D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够 ...

  5. MySQL数据库使用mysqldump导出数据详解

    mysqldump是mysql用于转存储数据库的实用程序.它主要产生一个SQL脚本,其中包含从头重新创建数据库所必需的命令CREATE TABLE INSERT等.接下来通过本文给大家介绍MySQL数 ...

  6. 微信JS接口汇总及使用详解

    这篇文章主要介绍了微信JS接口汇总及使用详解,十分的全面.详尽,包含分享到朋友圈,分享给朋友,分享到QQ,拍照或从手机相册中选图,识别音频并返回识别结果,使用微信内置地图查看位置等接口,有需要的小伙伴 ...

  7. Apache + Tomcat集群配置详解 (1)

    一.软件准备 Apache 2.2 : http://httpd.apache.org/download.cgi,下载msi安装程序,选择no ssl版本 Tomcat 6.0 : http://to ...

  8. ext.js的mvc开发模式详解

    ext.js的mvc开发模式详解和环境配置 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开 ...

  9. Solr系列二:solr-部署详解(solr两种部署模式介绍、独立服务器模式详解、SolrCloud分布式集群模式详解)

    一.solr两种部署模式介绍 Standalone Server 独立服务器模式:适用于数据规模不大的场景 SolrCloud  分布式集群模式:适用于数据规模大,高可靠.高可用.高并发的场景 二.独 ...

随机推荐

  1. genymotion和eclipse连接问题,一直出错

    前两天重装系统,但是在运行android代码的时候遇到了这样的问题 The connection to adb is down,and a server error has occured. You ...

  2. java高新技术-代理

    程序中代理的概念与作用 要为已存在的多个具有相同接口的目标类的各个方法增加一些系统功能,例如,异常处理.日志.计算方法的运行时间.事务管理.等等. 代理架构图: 如果采用工厂模式和配置文件的方式进行管 ...

  3. jQuery基础修炼圣典—DOM篇(一)

    一.DOM节点的创建 1.创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. ...

  4. jQuery序列化后的表单值转换成Json

    $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() ...

  5. python报错ordinal not in range(128)

    python编码问题:'ascii' codec can't decode byte 0xb0 in position 1: ordinal not in range(128) 这种问题有三种原因: ...

  6. Web缓存基础:术语、HTTP报头和缓存策略

    简介 对于您的站点的访问者来说,智能化的内容缓存是提高用户体验最有效的方式之一.缓存,或者对之前的请求的临时存储,是HTTP协议实现中最核心的内容分发策略之一.分发路径中的组件均可以缓存内容来加速后续 ...

  7. ABAP程序执行效率和优化 ABAP Performance Examples

    一.             SQL Interface1.         Select ... Where vs. Select + Check用Select … Where语句效率比Select ...

  8. 【原创】poj ----- 1611 The Suspects 解题报告

    题目地址: http://poj.org/problem?id=1611 题目内容: The Suspects Time Limit: 1000MS   Memory Limit: 20000K To ...

  9. nginx出现404和403错误

    配置文件的路径usr/local/nginx/conf/nginx.conf

  10. cxgrid属性说明,每次用的时候费时费力查找。

    由层得到数据表名: procedure TFB_PatientWaiting.cxgrdbtblvwGrid1DBTableView_MyPatienWaitingDblClick( Sender: ...