D3: Data-Driven Documents

3 Design设计

D3最基本的操作符是selection，它从当前文档中过滤的选出一组元素elements。Operator对selection进行运算，修改内容。Data join操作把数据绑定的元素上，同时启用依赖数据的函数操作符，产生enter和exit子选择符。当Operator采用即时修改模式是，动画transitions在属性和样式之间平缓的插补。此外还有event handlers和modeles对层和尺度进行可视化。

3.1 Selection选择器

D3采用W3C选择器API来选择文档中的元素，这种微语言包含一些属性词来过滤元素，例如tag("tag"),class("class"), unique identifier("#id"), attribute("[name=value]"), 容器containment('parent child')，连接adjacency("before~after")。属性词可以是分割(".a.b")或者是联合(".a,.b")，提过丰富简明的选择方法。

3.2 Data数据

D3的数据运算子将输入数据和已经选择好的结点绑定起来。这个过程是一个不可知的内在过程：数据可以是任意数值的数组，这些值可以是数字、字符或者对象。一旦数据被绑定到选定的元素上，这些数据将作为函数运算子的第一个参数，也就是d，同时被传过去的还有这些数据的数值索引i。这种方法简化了D3的选择结构。

一般来讲，数据按照索引值index与element元素结合：第一个元素与第一个数据结合。

如果data或者element在计算连接join的过程后，还有剩余的，这些剩余的data或者element可以在enter和exit子选择符中使用：entering数据没有相应的结点node接收，而

exiting结点node没有相应的数据输入。例如，如果数据被join到空的selection时，enter运算子返回对于每个数据的占位结点placeholder nodes，这些空的占位结点可以被append或者insert实例化。相似的，如果新的数据被join到一个已经存在的选择器selection上，exit运算子返回连接到要输出的数据上的elements，来进行移除操作。从数学角度来讲，给出数据D和结点N，enter指的操作是D大于N，而exit选择器指的是N》D，而update是在D和N之间的数据。更新结点仅仅有data运算子返回，当enter或exit为空时都可以用。

enter，update和exit三个周期的划分使得我们可以精确控制element的生命周期。对于element的固定属性可以在enter处进行设置，而动态属性可以在update处进行运算。动画渐变可以在三个状态中进行确定。

sticky粘连性：数据被帮到结点之后，仍可以在后续的选择器中使用，无需重新获取data运算子。这简化了后续变形和关键函数的实现。新的数据可以直接跟旧数据相别，而不需要重新获取文档中序列化后的数据值。数据可以用来重新排序或者剔除一些元素。