了解过D3的同学一定对下图不陌生。D3的意思是data-diven-document，那么什么是data-driven-document呢？羊毛布？D3如何将数据连接到dom元素？一般分为三步：selectAll通过enter()update()exit()操作选择数据绑定如下代码所示：svg.selectAll("circle")//returnemptyselection.data(data)//与数组绑定，返回更新选择.enter()//返回输入选择.append("circle")//.attr("cx",function(d){returnd.x;}).attr("cy",function(d){returnd.y;}).attr("r",2.5);让我们仔细看看D3的select和datajoinselection。一般来说，你可能认为selection是一个包含DOM元素的数组。其实，这是错误的。selection是array的子??类，包含了操作被选元素的方法，如：attrstyle；并继承数组的方法。selection是一个数组数组。d3.select和d3.selectAll都返回一个包含组数组的数组，而selection.selectAll返回一个包含多个组的数组。数据绑定（datajoin）当你将数据绑定到selectin时，数据实际上存储在selection中每个dom元素的__data__属性中。d3.select('body').__data__=42等同于d3.select('body').datum(42)d3.select('body').datum(42).append('h1')//h1从父级继承数据。D3中的数据是什么？数据是一个包含值的数组。数据数组中的值对应于选择中的组，而不是组中的元素。（selection.data按组而不是按元素定义数据：数据表示为组的值数组，或返回此类数组的函数。因此，分组选择具有相应的分组数据！）数据binding中的key默认通过比较datum和element的索引来绑定。此外，我们还可以指定一个密钥函数，自定义密钥对。注意：键函数对每个组中的每个元素执行一次，而不是对整个组执行一次。enterupdateexit如果selection中的key和data不匹配，那么就是上面三个selection注意上面三个selection中不匹配的元素用null表示MergingEnter&Updateenter.append有一个sideeffect:thenull在update中将元素替换为enter中新创建的元素
