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

上一篇讲了添加节点，边并进行绘画。这里讲讲更改设置以及添加事件响应。

说实话设置部分我不想讲多少，这里的文档挺给力的http://visjs.org/docs/network/我要讲的话估计得一个个分析过来，有点懒得_(:з」∠)_

这里贴一个我使用的配置，然后简单讲解一下。

var visOptions = {
	physics:{
		barnesHut:{
			gravitationalConstant:-100,
			centralGravity: 0,
			springConstant:0
		}
	},
	layout:{randomSeed:2},
	edges:{
		smooth: {
			enabled: true,
			type: "continuous",
			roundness: 0.5
		},
	},
	interaction:{
		keyboard: {bindToWindow: false},
		navigationButtons: true
	}
};

首先是physics部分，定义了物理动作，也就是画面上拉扯节点啥的会有怎样的动作

默认情况下是线条长度较为固定，线条很有弹性，会自适应节点位置达到一个平衡状态，且整个图会往中间靠拢。

而我要改的是节点不会自行移动，线条的长度不固定，整个图不会往中间靠拢的样子。

barnesHut是默认的一种物理运算规则

gravitationalConstant是节点与节点之间的斥力，自行调节

centralGravity是中央吸引力，整个图向中间靠拢的力的大小

springConstant是线条的弹性，因为我这里是节点位置固定，所以设置为0

physics可以到下面这个范例里面动态调节看效果。

http://visjs.org/examples/network/physics/physicsConfiguration.html

layout:{randomSeed:2},是固定随机生成时的随机种子，这样每次生成效果都一样

edges里面smooth是用来更改线条的描绘方式，具体在下面的范例里体会

http://visjs.org/examples/network/edgeStyles/smooth.html

默认的话线条中点也会被当做有一个隐藏的节点，用type: "continuous",就是连续的线条了

interaction意思是互动，里面简单设置鼠标拖动还有键盘事件

navigationButtons设置为true开启上下左右放大缩小的功能键

keyboard: {bindToWindow: false},是限制了键盘响应事件的侦听范围,默认为全屏，

也就是说如果页面上有其他输入框的话你在输入框里点左右也会被当做是对vis的操作，显然要适当限制掉

具体的也可以到这个范例上尝试，比physics那个更详细

http://visjs.org/examples/network/other/configuration.html