本章討論在力學圖中常用到的事件（ 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)
- 備注：轉載請注明出處，謝謝
