码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-12-18 18:06:34      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:

本章讨论在力学图中经常使用到的事件( 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

谢谢阅读。


文档信息


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

标签:

原文地址:http://www.cnblogs.com/mengfanrong/p/5057491.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!