码迷,mamicode.com
首页 > 其他好文 > 详细

Cytoscape绘图初探

时间:2014-11-04 17:28:24      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:web前端   css   js   json   cytoscape   

Cytoscape是一个做网络图的js插件,用起来很方便,而且很强大。这是它的网站:点击打开链接

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

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

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

<div id="hidden">
<s:iterator value="userlist" >	    	    
	 <div align="left" id="a"><s:property value="phe" /></div>
	 <div align="left" id="b"><s:property value="phecui" /></div>
	 <div align="left" id="e"><s:property value="icd" /></div>
	 <div align="left" id="f"><s:property value="mesh" /></div>
	 <div align="left" id="g"><s:property value="hpo" /></div>
	 <div align="left" id="h"><s:property value="symp" /></div>
	 <div align="left" id="i"><s:property value="omim" /></div>
	 <div align="left" id="j"><s:property value="snomed" /></div>
	 <div align="left" id="k"><s:property value="asdpto" /></div>
	 <div align="left" id="l"><s:property value="ovae" /></div>
	 <div align="left" id="m"><s:property value="mp" /></div>
	 <div align="left" id="n"><s:property value="pato" /></div>
	 <div align="left" id="o"><s:property value="bho" /></div>
	 <div align="left" id="p"><s:property value="ctx" /></div>
	 <div align="left" id="q"><s:property value="repo" /></div>
	 <div align="left" id="r"><s:property value="rpo" /></div>
</s:iterator>
</div>

将这部分的css设置一下,隐藏这部分div:

#hidden {
    display:none;
}

然后在js中利用document.getElementById.innerHTML来获取到每个div的值,最后传到Cytoscape的json数据格式中。这样就完成了传值,之后设置边就可以依据自己的需求来设置了。

另网络图样式可以根据官网的文档来修改,我做了个简单的图,不十分好看:

bubuko.com,布布扣

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

Cytoscape绘图初探

标签:web前端   css   js   json   cytoscape   

原文地址:http://blog.csdn.net/ll328062201/article/details/40786699

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