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

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

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

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

			});

这里的 force 是之前代码中定义的布局（ Layout ）。tick 表示当运动进行中每更新一帧时。

这是力学图中最常使用的事件，用于设定力学图每一帧是怎样更新的。除此之外，另一些其它经常使用的事件。

1. 布局的事件

代码中，如果定义例如以下的布局：

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

力学图布局 force 本身的事件，D3 提供了3个，分别为 start 。end，tick。

在写代码时。可形如：

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

各事件发生时，就会运行对应的代码。

2. 拖拽的事件

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

.call(force.drag);

即设定当拖拽时调用函数 force.drag()。

D3 中提供了3种拖拽事件：dragstart、dragend、drag。

			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，在调用时，仅仅要使用：

.call(drag);

就可以。

3. 顶点的固定

使用布局转换数据之后。顶点有一个属性 fixed 。

当这个值为 true 时，顶点就是固定不动的；为 false 时。它就是运动的。默认是 false 的。如果要改进【进阶 - 第 2.0 章】的代码。使得用户可以随意固定和解锁顶点，可加入代码例如以下：当拖拽開始时。被拖拽顶点设定为固定的：

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

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

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

4. 结果

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

拖拽后顶点会固定，双击顶点可以解锁。

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

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

谢谢阅读。

---

文档信息

• 版权声明：署名（BY）-非商业性（NC）-禁止演绎（ND）
• 发表日期：2014年11月08日
• 很多其它内容：OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
• 备注：转载请注明出处，谢谢

---