这一篇将简述如何使用选择操作元素
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相反的问题:你有太多存在的元素,你想移除它们当中的一些,你可以再次选择节点和手动移除它们,但是存在的选项通过数据进入计算更加强大。
退出选项是进入选项的反映,它包含的剩余元素是没有相符合的数据的