D3数据连接：进入

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

成都创新互联公司是一家以重庆网站建设公司、网页设计、品牌设计、软件运维、seo优化、小程序App开发等移动开发为一体互联网公司。已累计为汽车玻璃修复等众行业中小客户提供优质的互联网建站和软件开发服务。

什么是数据连接

顾名思义，数据连接肯定是将数据和某些东西连接起来。这些东西是网页上的一个或一组——< rect>、< circle>、< div>等所有值得怀疑的常见元素。具体一点，就是这些常见元素的一个D3选择集。　　 

在深入了解之前，让我们忘记D3一会儿。现在，想象有一幅可交互的图形，可以是你以前看到过的、自己写的或者刚刚想象出来的，其中有一些代表数据的图形及一些用来控制某些数据显示与否的按钮。当你点击这些按钮，图形会发生变化：位置偏移了，发光或者闪烁，颜色也变了，甚至可以一起从屏幕中飞出——要多疯狂有多疯狂。

现在，不管你的图形多么复杂，包含了多少数据，从基础层面看，涉及的这些形状（或线、文本标签、颜色及纹理）都只是在做以下3件事情。

• 显示在页面上——没有数据和图形就不可能有数据可视化，所以图形需要显示出来。

• 变换——当你点击按钮或调整滑块，图形的属性会按你想看到的最新数据进行更新。

• 离开页面——有时，如果一个或多个图形表示的数据不再有效，其会从页面完全移除。

就是这样的3件事情。一个交互式图形就像一座剧院，当演出的时候，演员进入舞台，表演节目，然后退场。在数据可视化中，形状——或更笼统地说，图形元素——进入页面，更新自身，然后退出。
　　数据连接充分利用了上述的初步想法。使用时，可以通过指令让图形元素进入、更新和退出。（实际上，我直接从D3中搬来了“enter”、“update”及“exit”这些词。）
　　此外，D3让你可以基于数据执行上述所有操作。D3通过一种称为“数据绑定”的技术来达成这种能力。无论何时执行数据连接，数据会真正被关联，或绑定到元素上。这真的太方便了，D3让你可以非常轻松地绑定数据了。所以，你会说：“好了，矩形，你所绑定的数据是多少？35？嗯，好吧，希望你的宽度也正好是这么宽。”
　　为了说明数据连接是如何工作的，我打算引入一个新的示例—— 一个涉及数据连接基本概念各方面知识点的示例。为了构建之前那幅人口分布条形图，我们也会引入数据连接，但不会描述得那么完整。所以，虽然有点跑题，但是引入一个新示例将有助于我们研究数据连接的方方面面。
　　本文只涉及数据连接知识的一部分，重点在其整个生命周期中关于“进入”的部分。在后面的推送中，我们会用同样的示例来详细阐述“更新”和“退出”部分。
　　好了，我们开始。
　　假设你有一个朋友，名字叫Frank。Frank有一个癖好是喜欢看明星八卦杂志和各种小道报刊。《美国周刊》、《人物》及《国家调查者》等，就是那种你在杂货店排队结账，百无聊赖时会瞥见的刊物，Frank一定会有强烈的兴趣。问题是，他其实并不关心Kim和Kanye的近况，他只是想知道一件事情：谁上封面了？
　　Frank最近一直在关注20多种不同杂志期刊封面上的特色名人，一个月内会有约50张不同的封面——已经持续了1年。此外，他还研究了过去4年各个封面人物的情况。“我认为那些在任何时刻都被人们议论的名人体现了这个国家的精神面貌”，Frank啰唆道。你有你的怀疑，但当Frank找到你并请求你帮他将这些信息做成可视化图形时，你也没法拒绝。
　　Frank的想法是：基于他所收集的近5年的数据，按月显示最热门的5个名人。他希望这个可视化图形是可以交互的，并具有动画效果，但是他不知道图形应该做成什么样子。然而，你是有想法的。你在笔记本上画了几分钟，交给Frank一幅草图，然后开始解释。
　　　　　　　　　　　　　　　
　想及时获得更多精彩文章，可在微信中搜索“博文视点”或者扫描下方二维码并关注。