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数据格式中。
这样就完毕了传值,之后设置边就能够根据自己的需求来设置了。
另网络图样式能够依据官网的文档来改动,我做了个简单的图。不十分好看:
这些点的数据都是依照上述方法从数据库传到前台的。