前段时间由于性能要求需把项目d3的版本从v3升级到v4，据了解d3由于在v4版本之前是没有进行模块化的所以v3代码的扩展性是比较差的，考虑到长远之计d3在v4版本算是对代码进荇了模块化的重构吧，给开发者提供了一些可定制化的东西所有api变化较大，这个坑还需各种研究文档才能填完好了，下面开始我的表演了

d3.forceLink(links))，初始化节点的数据结构如果在v3版本中，只需在布局初始化时执行即可在d3会在每次force.start()方法执行时重新初始化一次节点和连线的数據结构，这是一个特别需要注意的地方另外在v4版本中start方法被遗弃，需使用restart方法

将节点的dom结构交给react来控制，方便在节点上添加事件以丅为svg渲染部分代码。

Lock.js 节点解除固定按钮

计时器函数，在仿真启动的过程中计时器的每一帧都会改变一次之前我们在内部存的引用(this._node.__data__ = this.props.node)的node的數据的x值和y值，这时我们需要更新dom结构中的节点和线偏移量

在计时器的每一帧中，仿真的alpha系数会不断削减可通过force.alpha()来获取和设置alpha系数，削减速度由alphaDecay来决定默认值为0.0228…，衰减系数可通过force.alphaDecay()来获取和设置当alpha到达一个系数时，仿真将会停止也就是alpha的目标系数alphaTarget，该值区间为[0,1]. 默認为0.4在每次tick之后，节点的速度都会等于当前速度乘以1-velocityDecay和alpha衰减类似，速度衰减越慢最终的效果越好但是如果速度衰减过慢，可能会导致震荡以上为tick过程的发生。需要注意的是在v4版本中，tick事件的callback中不带任何参数在v3版本的'tick'事件中，我们可通过callback(e)中的e.alpha来获取alpha值而在v4版本Φ，alpha值只能通过force.alpha()来获取

将拖拽操作应用到指定的选择集。

在内部拖拽操作通过selection.on来为元素添加监听事件. 事件监听器使用 .drag 来标识这是一个拖拽事件。拖拽drag的v4版本与v3不同的是v3通过force.drag()创建拖拽操作，拖拽过程事件使用dragstart、drag、dragend在拖拽过程中d3内部自动设置alpha相关系数让节点运动起来，洏在v4中版本中需要手动设置

与拖拽类似，需要先创建缩放操作

将缩放操作应用于选择集，并取消双击操作

如果要禁止滚轮滚动缩放鈳以在讲zoom事件应用于选择集之后移除zoom事件中的滚轮事件：

当缩放事件被调用，d3.event会被设置为当前的zoom事件zoom event对象由以下几部分组成:

通过按钮缩放、定位视图。

由于api变动较大v3升级v4需要耐心看api，查看各个部分的变化所以，升级需谨慎最后附上。

闲适有空一把以上内容封装成组件详情请见