D3数据连接之“更新”和“退出”

  让我们回到之前那个“怪咖”Frank那里,重新审视一下他的那些小报封面数据,看一下Frank手头前3个月的数据,以及我们之前做过的事情。
  到目前为止,我们只让1月的数据“进入”页面,并渲染出一系列文本元素。
  让文本进入页面。
        
  页面上有文本元素,每个都表示janData中的一个数据点。现在我们要更新页面,显示2月的数据。就像“进入”一样,我们选中页面上的文本元素,并用data()方法调用数据连接。区别在于,这次页面上已经有文本元素了。所以,我们要将数据绑定到已经存在的数据上,而不是创建新的元素。
        

  这就是“更新”。我们使用新的数据更新元素。现在,由于新数据被绑定到元素上,我们可以通知页面顶部的文本读取“Jennifer Aniston”,而不是“Angelina Jolie”(将在后面的章节描述具体细节)。
  注意,此处并没有update()的方法。通过enter()方法调用,你创建了一个特殊的对象占位集,每一个占位表示数据集中一个尚未绑定的数据点。但是,为了更新页面上已有的元素,你并不需要这么做。只要创建这些元素的选择集,就可以通知它们基于最新绑定的数据进行渲染了。
  你可能会很好奇,上图中那个很醒目的问号是什么?其存在的理由是:2月的数据有5个点,而1月只有4个。那么,这第5个数据点该如何操作?它还没有绑定任何元素啊!
  如果你猜这时它会自动“进入”页面,那就错了。我们可以像以前那样使用enter()方法调用。

  但是,这次该方法只会创建一个没有元素关联的数据点,而会不像以前那样创建5个全新的占位元素。D3这时可以很好地满足你的要求。
  现在,我们像往常一样调用就可以新建一个文本元素,数据和元素又再次全部匹配了。

  很好,我们将目光移到3月。我们要做的还是选中页面上的所有文本元素,然后将3月的数据连接上去。

  但是,由于3月只有4条数据,所以数据点实际上比待绑定的元素还要少。有数据进来的元素可以很简单地得到更新,但是那些没有匹配到数据的元素呢?现在就是“退出”出场的时候了。我们需要删掉第5个文本元素(就像离开舞台的演员一样),exit()方法就能派上用场了。一般而言,执行完数据连接后,我们可以使用exit()方法来选中所有不再有数据绑定的元素。然后,我们可以利用另外一个方法remove()来移除它。

  就这样,我们介绍了数据连接的整个生命过程——进入、更新和退出。数据连接的基础概念非常简单:图形总是出现在页面上,不断变换,最终离开页面,就像剧场舞台上的演员,登台,表演,退场。D3通过将数据点和元素进行连接、绑定、比较来处理这3种状态的轮换 。其只可能出现以下3种结果。

  1. 数据点比元素多。这将触发“进入”状态(也有可能是“更新”状态)。
  2. 数据点和元素一样多。这将触发“更新”状态。
  3. 元素比数据点多。这将触发“退出”状态(也可能是“更新”状态)。

但是,也有和剧场这个比喻不一样的地方:在一场表演中,演员必须遵循登台、表演、退场这样的节奏,但是在D3中,你不一定要全部经历这3种状态的变迁。有时候,你会用D3制作一个静态的图形,只需要调用enter()即可。在其他场景下,数据点和元素保持一致,所以你永远不需要调用(实际上,我们的条形图就是这种情况)。

  本文选自《图说D3:数据可视化利器从入门到进阶》,点此链接可在博文视点官网查看此书。
                   
  想及时获得更多精彩文章,可在微信中搜索“博文视点”或者扫描下方二维码并关注。
                      

时间: 2024-12-30 00:01:20

D3数据连接之“更新”和“退出”的相关文章

D3数据连接:进入

引言:数据连接是D3中的面包和黄油.D3不提供制图的基础函数,相反,它靠的是数据连接.数据连接可以让页面元素进入网页,一旦进入,可以修改.更新及退出.本文将主要介绍"进入"部分. 本文选自<图说D3:数据可视化利器从入门到进阶>. 什么是数据连接 顾名思义,数据连接肯定是将数据和某些东西连接起来.这些东西是网页上的一个或一组--< rect>.< circle>.< div>等所有值得怀疑的常见元素.具体一点,就是这些常见元素的一个D3选

mysqli 数据连接类

mysql教程i 数据连接类 class Mydb extends mysqli {     protected $_databasehost = 'localhost';     protected $_databaseuser = 'root';     protected $_databasepass = '123456';     protected $_databasename = 'test';     protected $_databaseport = '3306';  prot

jsp 网站开发-jsp连接 mysql 更新语法错误,大家帮我看看,谢谢~

问题描述 jsp连接 mysql 更新语法错误,大家帮我看看,谢谢~ update test set check='1' where memName ='lmy' 解决方案 有可能表中列名不对应或者设置的类型不对应

用php和MySql来与ODBC数据连接

ODBC 是指开放数据连接,它是微软主导的数据驱动程序,它可以与其它数据连接,通过SQL语言来对数据进行操作的,当然PHP也提供了对ODBC数据连接的函数, 用PHP与ODBC连接主要通过几个函数来完成的,    首先先来认识几个与ODBC接口的函数: int odbc_connect(string dsn, string user, string password, int [cursor_type]);是连接至ODBC数据库 dsn ,user,password 是对应着ODBC里的内容,c

SPL3.0数据连接详解

数据|详解 SPL3.0数据连接详解 SPL3.0数据支持能力 SPL3.0在数据连接方面作了很大的改进,使用多种方式对多种数据库进行连接访问,让用户有了更多的选择, 支持的数据库有:SQL Server .Access.Oracle.其他ODBC连接 支持的连接方式有: 用System.Data.SqlClient访问SQL Server 用System.Data.OleDb访问Access和Oracle 用System.Data.Odbc访问SQL Server.Oracle等其他ODBC连

畅游无限浏览器无法连接到更新服务器的解决方法

畅游无限浏览器无法连接到更新服务器的解决方法   畅游无限浏览器 畅游无限浏览器无法连接到更新服务器的解决方法 解决方法一:换个手机QQ浏览器吧; 下载地址:手机QQ浏览器安卓版|手机QQ浏览器iPhone版 这你可以这样解决,即使网络很微弱也是可以; 稳定的运行的哦.这个手机QQ浏览器是比较问的你好; 解决方法二:这个无法连接到网络服务器的话,那可能是你的网络问题的吧.我使用了这么多年都没有出过差错,你把你的浏览器更新或者是重启你的路由器.

LoadRunner测试文件/表参数的数据分配和更新方法

用LR作测试时,往往要设置参数,参数设置的不同直接影响到测试结果,所以是测试中至关重要的一环.曾经在论坛和其他网站上搜寻过类似的问题,想从中找出实际的操作过程,但很遗憾,找到的大都比较零散,或是看了也不明白如何作,实在没办法,才想到了手册,一看之下,才发现用手册上归纳的来作为初步的指导已经绰绰有余.以下是从LR自带的帮助文件里摘出的. 警戒:以后碰到问题,边在网上搜索,边查手册,不必急着发问,因为你问的别人不一定遇到过,或者根本不理解你的意思,更惨的,放N天也无人问津. 对于文件和表类型参数,所

求解sql左连接问题,能不能把空值数据连接起来

问题描述 求解sql左连接问题,能不能把空值数据连接起来 有什么办法可以把A表和B表当中有些数据为空的列连接起来 比如: A表有a1,a2,a3 B表有b1,b2,b3 按条件a1=b1连接两个表 但a1和b1中有些数据是空的,现在想把这些为空的数据放在一起连接起来. 我试过了,直接a1=b1不行,为空的数据好像不相等 解决方案 那就用联合查询试试了 解决方案二: ifnull(a1, '') = ifnull(b1, '') 这样呢 解决方案三: 刚电脑卡了 没防住多点了几下 不好意思 解决方

mysql两表数据匹配,更新结果为什么为0

问题描述 mysql两表数据匹配,更新结果为什么为0 update crm_customerhr_postset crm_customer.beseats_depid=hr_post.dep_idcrm_customer.beseats_depname=hr_post.depnamewhere hr_post.emp_id=crm_customer.BeSeats 解决方案 0就是没有数据更新呗,没有符合条件的数据吧 解决方案二: 字段名合适的没?表里边有没有这些字段