【 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个人博客
- 备注:转载请注明出处,谢谢