【 D3.js 选择集与数据详解 — 5 】 处理模板的应用
在【选择集与数据 - 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
谢谢阅读。
文档信息
- 版权声明:署名(BY)-非商业性(NC)-禁止演绎(ND)
- 发表日期:2015 年 2 月 7 日
- 更多内容:OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
- 备注:本文发表于 OUR D3.JS ,转载请注明出处,谢谢