专栏首页博文视点BroadviewD3数据连接之“更新”和“退出”

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

小编说:昨天的推送中,我们阐述了数据连接的进入阶段。本文中,我们学习一下其更新和退出机制。 本文选自《图说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()即可。在其他场景下,数据点和元素保持一致,所以你永远不需要调用(实际上,我们的条形图就是这种情况)。

本文分享自微信公众号 - 博文视点Broadview(bvbooks),作者:博文视点

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-03-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 大数据与传统数据

    大数据与传统数据相比的主要特点可以概括为:数据量“大”、数据类型“复杂”、数据价值“无限”。

    博文视点Broadview
  • 五步法建设你的数据中台

    数据中台是当下非常热门的话题,可以解决企业重复造轮子的问题。虽然数据中台在互联网企业中已经有了多年的实践,但是对于传统企业来说还是一个比较新的话题。

    博文视点Broadview
  • 【数据思维丨主题周】从智能ABC到搜狗,探寻数据驱动的价值

    不论2008 年Google 推出的流感预测产品,还是Prada旗舰店中每件衣服上的RFID码,数据能够给社会、企业带来商业模式上的优化,以及商业自动化的突破。...

    博文视点Broadview
  • 2018最新大数据学习路线来了,另送1024G学习资料!

    随着大数据时代的到来,有很多JAVA程序员想要转行大数据。 不得不说,大数据行业可以说是为JAVA程序员量身打造的一个朝阳行业?为什么要这么说呢?

    Java技术栈
  • 基于元数据驱动的ETL

    元数据的定义 元数据(Metadata),为描述数据的数据(data about data),主要是描述数据属性(property)的信息,用来支持如指示存储位...

    大数据和云计算技术
  • 华为腾讯为用户数据“掐架”;苹果加强在部分国家的数据采集 | DT数读

    过去一周,国际、国内的大数据相关公司都有哪些值得关注的新闻?数据行业都有哪些新观点和新鲜事?DT君为你盘点解读。

    DT数据侠
  • 数据科学家:共享经济的幕后功臣

    在Google、Amazon、Facebook、Uber、Airbnb等公司成功的背后,有这样一批人:他们可以将大量的数据变为有价值的金矿,例如,搜索结果、定向...

    小莹莹
  • 【WAWX精华回顾系列】乐高化的数据思维与应用

    数据洞察是现代营销人必备的能力,但是怎么样才能应用数据思维来解决实际问题呢?来自Ptmind铂金智慧的创始人兼CEO郑远,在WAWX十年数据峰会上与大家分享近十...

    iCDO互联网数据官
  • 程序员离职四大原因,为何转型大数据成首选?

    3.压榨得太厉害,加班太厉害,一直掉头发,快秃头了。没有培训,连程序员自己自学的时间都被加班占用,身体和技术很难提升。

    小小詹同学
  • 全球最大地标识别数据集问世:包含200万张图片和3万处地标

    今天,谷歌推出了目前世界上最大的人造和自然地标识别数据集Google-Landmarks。数据集中包含200万张图片,描述了3万处全球独特地标,量级是普通的数据...

    量子位

扫码关注云+社区

领取腾讯云代金券