【 D3.js 进阶系列 — 2.1 】 力学图的事件 + 顶点的固定

【 D3.js 进阶系列 — 2.1 】 力学图的事件 + 顶点的固定

发表于 2014/11/08

本章讨论在力学图中常用到的事件（ Event ），然后对【进阶 – 第 2.0 章】的人物关系图进行改进，使用户能够固定拖拽的对象。

在【入门 – 第 9.2 章】和【进阶 – 第 2.0 章】中，都用到了以下代码：

1 2 3

force . on ( "tick" , function ( ) {                } ) ;

这里的 force 是之前代码中定义的布局（ Layout ），tick 表示当运动进行中每更新一帧时。这是力学图中最常使用的事件，用于设定力学图每一帧是如何更新的。除此之外，还有一些其他常用的事件。

1. 布局的事件

代码中，假设定义如下的布局：

1 2 3 4

var force = d3 . layout . force ( )                              . size ( [ width , height ] )                              . linkDistance ( 200 )                              . charge ( - 1500 ) ;

力学图布局 force 本身的事件，D3 提供了3个，分别为 start ，end，tick。在写代码时，可形如：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

//力学图运动开始时              force . on ( "start" , function ( ) {                  console . log ( "开始" ) ;              } ) ;                           //力学图运动结束时              force . on ( "end" , function ( ) {                  console . log ( "结束" ) ;              } ) ;                           //力学图每一帧              force . on ( "tick" , function ( ) {                  console . log ( "进行中" ) ;              } ) ;

各事件发生时，就会执行相应的代码。

2. 拖拽的事件

在【入门 – 第 9.2 章】和【进阶 – 第 2.0 章】中，都出现了以下代码：

1	. call ( force . drag ) ;

即设定当拖拽时调用函数 force.drag()。D3 中提供了3种拖拽事件：dragstart、dragend、drag。

1 2 3 4 5 6 7 8 9 10

var drag = force . drag ( )                          . on ( "dragstart" , function ( d , i ) {                              console . log ( "拖拽状态：开始" ) ;                          } )                          . on ( "dragend" , function ( d , i ) {                              console . log ( "拖拽状态：结束" ) ;                          } )                          . on ( "drag" , function ( d , i ) {                              console . log ( "拖拽状态：进行中" ) ;                          } ) ;

上面代码中，分别定义了三种事件后，将此拖拽函数赋值给变量 drag，在调用时，只要使用：

1	. call ( drag ) ;

即可。

3. 顶点的固定

使用布局转换数据之后，顶点有一个属性 fixed 。当这个值为 true 时，顶点就是固定不动的；为 false 时，它就是运动的。默认是 false 的。

如果要改进【进阶 – 第 2.0 章】的代码，使得用户能够任意固定和解锁顶点，可添加代码如下：

当拖拽开始时，被拖拽顶点设定为固定的：

1 2 3 4 5

var drag = force . drag ( )                          . on ( "dragstart" , function ( d , i ) {                              d . fixed = true ;      //拖拽开始后设定被拖拽对象为固定                              label_text_2 . text ( "拖拽状态：开始" ) ;                          } )

当鼠标双击顶点时，对顶点解锁：

1 2 3

nodes_img . on ( "dblclick" , function ( d , i ) {                                      d . fixed = false ;                                  } )

4. 结果

在左上角添加了标签文字，请好好体会一下各事件发生的状况。

拖拽后顶点会固定，双击顶点能够解锁。

width="600" height="600" src="http://www.ourd3js.com/demo/J-2.1/relationforce.html" marginwidth="0" marginheight="0" scrolling="no" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; max-width: 100%;">

完整代码请点击下面链接，右键选择“查看网页源代码”：

http://www.ourd3js.com/demo/J-2.1/relationforce.html

源代码和图片打包下载：j21.zip

谢谢阅读。

http://www.ourd3js.com/wordpress/606/#more-606