关闭

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

标签: D3数据科学
2180人阅读 评论(0) 收藏 举报

摘要: 昨天的推送中,我们阐述了数据连接的进入阶段。本文中,我们学习一下其更新和退出机制。 本文选自《图说D3:数据可视化利器从入门到进阶》。

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

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

  但是,这次该方法只会创建一个没有元素关联的数据点,而会不像以前那样创建5个全新的占位元素。D3这时可以很好地满足你的要求。
  现在,我们像往常一样调用就可以新建一个文本元素,数据和元素又再次全部匹配了。
【图4】
  很好,我们将目光移到3月。我们要做的还是选中页面上的所有文本元素,然后将3月的数据连接上去。
【图5】

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

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

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

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

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

1
0
查看评论

D3.js 动态数据刷新视图详解

在官网有着丰富demo的基础上,使用d3绘制一副静态图表并不是难事。但我们更多的需求是:根据用户操作动态获取数据库中数据,进而刷新视图。
  • Nicolecc
  • Nicolecc
  • 2016-03-10 09:47
  • 6666

D3+mysql 画Force图

先上图再解释。 所谓力学图(Force),就是用点和线来表示各点之间的关系。比如上面这张错综复杂的关系,就是由一个json数组,然后利用D3画图来得到的。 之前学D3,一直停留在给他数据,然后用layout布局,再用不同的图表的格式来画图就好了。而数据,不是自己写死的,就是从一个json文件或者...
  • u012603073
  • u012603073
  • 2015-07-14 10:48
  • 1500

D3 进入-更新-退出 理解

D3 enter update exit
  • sinat_32957107
  • sinat_32957107
  • 2017-12-01 15:24
  • 99

D3数据连接:进入

数据连接是D3中的面包和黄油。D3不提供制图的基础函数,相反,它靠的是数据连接。数据连接可以让页面元素进入网页,一旦进入,可以修改、更新及退出。本文将主要介绍“进入”部分。 本文选自《图说D3:数据可视化利器从入门到进阶》。
  • broadview2006
  • broadview2006
  • 2017-03-14 13:43
  • 2304

d3 力导向图

力导向图(Force-Directed Graph),是绘图的一种算法。在二维或三维空间里配置节点,节点之间用线连接,称为连线。各连线的长度几乎相等,且尽可能不相交。节点和连线都被施加了力的作用,力是根据节点和连线的相对位置计算的。根据力的作用,来计算节点和连线的运动轨迹,并不断降低它们的能量,最终...
  • qq_26562641
  • qq_26562641
  • 2017-09-05 10:52
  • 1020

d3.js 坐标轴(第四版部分api更新)

var width=600; var height=600; var svg=d3.select("body").append("svg").attr("width",width).attr("height&quo...
  • Dove88888888
  • Dove88888888
  • 2017-03-29 16:09
  • 1368

大数据时代的图表可视化利器——highcharts,D3和百度的echarts

还记得阿里巴巴那个令人澎湃激情的双十一吗?还记得淘宝生动形象地把你的的消费历程一一地展示给你看吗?还记得那些酷炫拽的it报告图表吗?在这个大数据越来越盛行的年代,怎样去表达一些用户的关系,人物的关联,甚至是事情的发展,都让我们有更多的表达方式。其中最简单直接,形象明了的就是用图表说明问题了。 ...
  • minidrupal
  • minidrupal
  • 2014-12-25 22:37
  • 12005

数据可视化 D3.js实现力导向图之二(node带文字说明和提示)

从官方下载下的demo,直接加text带文字,始终未能显示出来,但是title却能显示出来,最后经过与网上其他地方做出来的例子用firebug进行跟踪对比,发现能够正确显示title的html里边g标签为node里边包含circle和text(circle、title和text是平级的),而官方下载...
  • loganyang123
  • loganyang123
  • 2013-12-25 00:32
  • 6589

利用d3更改坐标的显示方式

var data = [{ "creat_time": "2013-03-12 15:09:04", "record_status": "ok", ...
  • rogerzhanglijie
  • rogerzhanglijie
  • 2013-11-05 13:32
  • 3175

echart和d3.js

文档 http://echarts.baidu.com/option.html#title 参数name,data,type,symbolSize,tooltip,label,itemStyle ———————————————————————————————————————————————— ...
  • shmily__35
  • shmily__35
  • 2017-05-01 21:20
  • 1056
    个人资料
    • 访问:3919056次
    • 积分:56457
    • 等级:
    • 排名:第57名
    • 原创:1462篇
    • 转载:83篇
    • 译文:1篇
    • 评论:3786条
    博客专栏
    文章存档
    最新评论