Cytoscape画图初探

Cytoscape是一个做网络图的js插件。用起来非常方便，并且非常强大。这是它的站点：点击打开链接

使用它须要导入两个文件，一个是js文件，一个是css文件。官网上下载。

这里实现了一个功能。即从后台数据库中检索数据，然后返回到前端，生成网络图。

后台action就不写了，总之返回到前端的是一个struts2的<s:iterator value="userlist" >。首先用div显示出来：

<div >
<s:iterator value="userlist" >	    	    
	 <div align="left"  /></div>
	 <div align="left"  /></div>
	 <div align="left"  /></div>
	 <div align="left"  /></div>
	 <div align="left"  /></div>
	 <div align="left"  /></div>
	 <div align="left"  /></div>
	 <div align="left"  /></div>
	 <div align="left"  /></div>
	 <div align="left"  /></div>
	 <div align="left"  /></div>
	 <div align="left"  /></div>
	 <div align="left"  /></div>
	 <div align="left"  /></div>
	 <div align="left"  /></div>
	 <div align="left"  /></div>
</s:iterator>
</div>

将这部分的css设置一下，隐藏这部分div：

#hidden {
    display:none;
}

然后在js中利用document.getElementById.innerHTML来获取到每一个div的值，最后传到Cytoscape的json数据格式中。

这样就完毕了传值，之后设置边就能够根据自己的需求来设置了。

另网络图样式能够依据官网的文档来改动，我做了个简单的图。不十分好看：

Cytoscape画图初探

这些点的数据都是依照上述方法从数据库传到前台的。