Three Little Circles

这一篇将简述如何使用选择操作元素
1.Selection Element
d3.selectAll()方法选取一个选择器字符，例如“circle”，然后返回一个匹配该选择器和陈述所有元素的选项。
`var circle = d3.selectAll("circle");`
在一个选项中，我们对于选择的元素可以做出不同的改变，例如，我们可以改变填充颜色和半径通过selection.style和selection.attr方法

`circle.style("fill",steelblue)`
`circle.attr("r",30);`

以上的设置属性和风格的代码是对所有选择元素设置相同值的。

我们可以通过匿名函数对每一个基本元素设置值，每个选定元素，函数将会求值一次，匿名函数在D3中被扩展使用来计算属性值，特别在尺度和形状的连结中，如设置圆x的坐标成一个随机值
`circle。attr("x",function(){return Math.random()*720;})`

2.Bingding Data

更普遍的，我们使用数据去驱动这个圆的外形，比方收我们想要这个圆表现这些数字，32，57和112，selection.data方法绑定这个数字到圆中
circle.data([32,57,112]);
数据被指定为数组值，这反映了选项的概念，每一个数组元素，在以上代码中，第一个数被绑定在第一个圆中(第一个元素，基于它们在DOM中的定义顺序)，第二个数字被绑定在第二个圆中，等等。
在数据被绑定之后，它可以作为属性和样式风格函数的第一个参数来访问，按照惯例，我们通常使用d来引用绑定数据，使用数据设置半径。
`circle.attr("r",function(){return Math.sqrt(d);})`

第二个选项参数是对你可以使用的每一个函数：对于选项中的元素索引值，索引经常被用来定位序列元素，按照惯例，
它被引用作为i，例如
`circle.attr("cx",function(d,i){
return i*100+30;
}`

3.Entering Elements
4.要是我们有四个数字要展示，超过三个又怎样呢？我们将没有足够的园，我们需要创造更多的元素来陈述我们的数据，你可以手动添加一个新节点，但是一个更强大的方法是进入选项中通过加入数据来计算。
当加入数据到元素中的时候，D3放下任何剩下的元素，或者同等的遗失的在进入选项中的数据，对于仅仅三个圆，第四个圆将被放进这个进入选项中，因为其它的三个员将通过selection.data直接返回。
通过添加到这个enter选项，我们可以创造新的员对任何遗失的数据，这个新圆将被添加到这个已被定义元素中通过父选项，因此，我们首先选择svg元素，然后选择所有的circle元素，然后加入它们去生成数据
`var svg = d3.select("svg");

var circle = svg.selectAll("circle")
.data([32, 57, 112, 293]);

var circleEnter = circle.enter().append("circle");`

进入的元素早已经被绑定到数据上的，因此我们可以使用数据计算属性和样式，同时设置特征。
就拿这个逻辑极限来说，然后，要是我们没有存在的元素，比如也该空页，然后我们加入数据一个空选项中，所有的数据在进入的时候结束。
这个模式是很普遍的，你将经常看到selectAll+data+enter+append方法相继被地调用，一个接着一个，尽管它开始很普遍，注意着仅仅是数据进入的一个特殊例子。
svg.selectAll("circle").
data([data])
.enter.append("circle")
.attr("x",60)
.attr("y),functon(d,i){return i*100+30;})
.attr("r",function(d){return Math.sqrt(d);})

进入模式通常用链方法用来连结，其它的简略代码，因为D3方法返回它们表演的选项，你可以应用多个操作对同一个选项。

Exit Entering
通常情况下你会遇到来自enter相反的问题：你有太多存在的元素，你想移除它们当中的一些，你可以再次选择节点和手动移除它们，但是存在的选项通过数据进入计算更加强大。
退出选项是进入选项的反映，它包含的剩余元素是没有相符合的数据的