vis.js的network(关系图)研究2

刚想整理用法翻了下首页居然出了新版...还是3.X到4.0的大更新，我就醉了...

粗略的用了一下,4.0比3.X完善了不少，多了实用的函数，根据div大小变化自动重画啥的功能也有了（以前我用时见到的一个bug算是被解决了）

不过毕竟刚经历大更新，貌似还是有新bug出现，不过我看到的小bug已经在4.0.1被改好了，

基本上有bug有需求在官网github上发文章开发人员就会去看的，服务质量不错。

接上篇，首先html部分只要有一个div就可以了，自己指定大小宽度。

<div id="vis" name="vis" style="height:700px;width:100%;border: 1px solid lightgray;"></div>

剩下的工作都在js里完成

首先js里定义3个对象nodes, edges和 network分别代表存放所有节点的对象，存放所有线的对象还有关系图对象

nodes和edges建议初始化为专用的visDataSet对象

nodes = new vis.DataSet();
edges = new vis.DataSet();

这样可以使用add，remove以及各种遍历查询等方法

接着往nodes和edges里面添加节点和线的对象

我是用的方法是定义一个var obj = new Object();

然后更改变节点或是线的属性(id为必填项且唯一，不能有相同id的两个节点或两条线，但可以有相同id的节点和线)

例如改变label的值就执行obj["label"] = "label";

具体哪些属性可以修改可以参考下面的地址

http://visjs.org/docs/network/nodes.html

http://visjs.org/docs/network/edges.html
改好节点/边的属性后就用add方法添加进nodes和edges

<pre name="code" class="javascript">try {
	nodes.add(obj);
}
catch (err) {
	alert(err);
}

建议用try，catch，那样出现错误（例如id重复时可以进行错误管理）做好nodes和edges后就可以使用如下语句画出图像来

<span style="white-space:pre">	</span>var container = document.getElementById("vis");
	
	var data = {
	<span style="white-space:pre">	</span>nodes: nodes,
	<span style="white-space:pre">	</span>edges: edges
	};
	
	var visOptions = {};
	
	network = new vis.Network(container, data, visOptions);

首先container是放置图像的容器，从html获得，找那个div就行
visOptions是进行设置用的，这里用空，即默认设置

执行到这里页面上就有关系图了，拉来拉去挺好玩的，下一篇讲一下设置更改以及添加事件函数的方法。