d3.js 使用方法 从0起步个人学习过程（1）

注意：所有资料均是从d3手册翻译而来

刚开始学习d3发现最大的问题是手册都英文的，有中文翻译，但是是针对API的，这个对于刚开始初学者很不方便，所以，个人在边学的过程中，把学过的部分翻译下来，以便英文不好的童鞋参考

Three Little Circles   三个小圆

这是用SVG画的三个小圆，

效果如上

也可参考手册，因为测试，所以跟手册上的效果会不一样

Selecting Elements

选择元素，这一步了解d3的选择器的使用，这个很简单，就跟jquery 的用法差不多，很方便 

这是手册上的案例，看代码也都能看懂了，

d3.selectAll("circle")  就是d3的选择器，选择文档中的所有circle元素， 然后对其进行属性的修改，

circle. style  类似  jquery 的  style,或者 css 方法 ，设定选择元素的样式，attr  设定属性值，

和jquery 的attr  用法基本上一致

匿名方法

在设置属性或者样式的时候，可以使用一个匿名方法来对其值进行处理，尤其是 图形的比例尺寸 和 形状方面，使用比较多

数据绑定

这个是整个d3的核心，d3使用的是svg的方式来绘制图形，这个有个很大的好处主是图形的交互性，你可以随时给绘制的图形绑定一个事件，比如：点击，鼠标移过等，这方面使用canvas方式来绘制就不容易实现 

什么是数据绑定：就是每个数据对应一个选择的元素，比如上面：有三个圆，那么数据绑定的时候设定一个数组，对应三个值，每一个值就对应一个圆，数值越大，圆越大，  data方法里传递一个数组，数组元素依次对应每个圆，注意：数组元素和圆是顺序对应的

上面的例子就是数据绑定后，然后把数组里面的值依次传递到匿名方法里面进行处理，

d:代表数组里面传递过来的值，

i: 代表第几个元素，即数组的索引值

上面这段是本人开始练习时的测试用例，

seletc 是选择单个元素

进入元素

这段意思就是：在实际使用中，我们可能不止3个圆，会有多个圆，但我们在SVG中，只初始化了3个，那么当我们需要4个或者更多的时候怎么办？比如：我有1000个数据，你不可能在文档里， 写1000次circle, 这个不现实，那怎么办？

可以用强大的enter() 选择器，这个选择器就是当你有N多个数据的时候，我可以先给每个数据开辟一个空的占位符， 至于这个空占位符，你是放圆，还是放正方形还是放长方形，都无关紧要，反正你有多少个数据，我就除开你已经画了的图形外，剩下的我就给你多少个占位符。等下你自己去填充。

这是我的测试案例，效果如下：

退出元素

这个就是当我们不需要其中一些已经存在的图形的时候，我们该如何删除？

这个时候就可以使用exit选择器，注意：使用exit 的时候，顺序和enter 是一样的，是依次对应的

这是删除案例，效果如下

总结

这段话原文翻译：

回顾一下，想想从绑定数据到元素，可能的三种结果：

1、enter - 即将加进来的元素   ,enterign 阶段

2、update - 一直存在的元素， staying 阶段

3、exit - 即将移除的元素， exiting 阶段

默认数据绑定依次进行：第一个元素绑定到第一个数值，依次类推。因此，enter 和 exit 选择器 其中一个或者都会为空。如果数据比元素多，则多余的数据会放在enter 选择器中。如果数据比元素少，则多余的元素会放在 exit 选择器中。

你可以通过指定 键函数 到  select.data 中以精确的绑定数据到对应的元素。例如：通过使用标识函数，你可以把圆重新绑定到对应的新数据中，同时确保已经存在的圆被绑定到新数据中的值是一样的

上面这段话大家自己可以再理解，反正一个中心意思就是给 data([ ]) 加一个方法，可以保证数据能够准确的重新绑定！

下面是我的测试：

我先给data 加个方法 后，效果如下：

原本是6个圆，3黑3红，现在加了data 的键方法后，数据重新绑定了，每个数据绑定一个圆，注意：为了使圆的区别大些，我把处理半径的Math.sqrt(d)  修改成了  d / 5

下面接着我同样删除其中2个圆，按照之前的写法如下：

看看效果如下：

这时发现我们删除掉2个后 剩下的 点变成3黑一红，原来是6个红色的圆，3个黑色的圆， 为什么6个红圆只剩下一个呢，明明我们只删除了2个的啊？原因很简单，data  没有加 键方法，导致数据没有重新绑定，且圆和数组的值没有一一对应，那么我们继续给data 加个键方法看看效果如下：

效果如下：

这个结果就是比较符合我们的需求的，我只需要删除2个红圆，剩下的都不需要了，删除，剩4个红圆

这是第一部分的学习成果，希望对有同样需要学习需求的猿们能够有一定的帮助