力学图的事件 + 顶点的固定
最后更新于：2022-04-01 20:04:28
本章讨论在力学图中常用到的事件（ Event ），然后对【[进阶 - 第 2.0 章](http://www.ourd3js.com/wordpress/?p=555)】的人物关系图进行改进，使用户能够固定拖拽的对象。
在【[入门 - 第 9.2 章](http://www.ourd3js.com/wordpress/?p=196)】和【[进阶 - 第 2.0 章](http://www.ourd3js.com/wordpress/?p=555)】中，都用到了以下代码：
~~~
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 章](http://www.ourd3js.com/wordpress/?p=196)】和【[进阶 - 第 2.0 章](http://www.ourd3js.com/wordpress/?p=555)】中，都出现了以下代码：
~~~
.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 章](http://www.ourd3js.com/wordpress/?p=555)】的代码，使得用户能够任意固定和解锁顶点，可添加代码如下：当拖拽开始时，被拖拽顶点设定为固定的：
~~~
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](http://www.ourd3js.com/demo/J-2.1/relationforce.html)
谢谢阅读。
文档信息
- 版权声明：署名（BY）-非商业性（NC）-禁止演绎（ND）
- 发表日期：2014年11月08日
- 更多内容：[OUR D3.JS - 数据可视化专题站](http://www.ourd3js.com/) 和 [CSDN个人博客](http://blog.csdn.net/lzhlzz)
- 备注：转载请注明出处，谢谢
';