【 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

varforce=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