Cytoscape绘图初探
来源:互联网 发布:ip是设备还是网络连接 编辑:程序博客网 时间:2024/06/05 20:56
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数据格式中。这样就完成了传值,之后设置边就可以依据自己的需求来设置了。
另网络图样式可以根据官网的文档来修改,我做了个简单的图,不十分好看:
这些点的数据都是按照上述方法从数据库传到前台的。
1 0
- Cytoscape绘图初探
- Cytoscape
- Matplotlib绘图库初探
- cytoscape.js
- cytoscape study
- 【Python】Matplotlib绘图库初探
- 【Python】Matplotlib绘图库初探
- 关于cytoscape插件
- install Cytoscape on Ubuntu
- Cytoscape相关问题
- [Canvas绘图] 第27节 三维初探
- 关系分析可视化插件-Cytoscape
- Html5 Canvas初探学习笔记(5) -绘图状态
- 初探GDI——基本框架(几何绘图)
- Cytoscape Web 实现网络拓扑结构图
- 可视化分析工具Cytoscape使用记录
- Cytoscape源码下载地址和编译办法
- 基于CytoScape.js的可视化研究
- Palette的使用
- HashMap HashTable HashSet区别剖析
- Shell Sort with array[]
- C++,string实现
- android4.4中jni的native的方法无法找到的解决方案
- Cytoscape绘图初探
- openstack学习笔记一 虚拟机启动过程代码跟踪
- leetcode Letter Combinations of a Phone Number
- 自己写EnumHelper
- 为jsp配置对外访问路径
- Java Thread 总结
- linux单用户模式
- [UIApplication sharedApplication].delegate 调用全局变量
- Android有效的处理Bitmap,减少内存