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数据格式中。

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

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

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

Cytoscape画图初探的更多相关文章

  1. Python3画图系列——NetworkX初探

    NetworkX 概述 NetworkX 主要用于创造.操作复杂网络,以及学习复杂网络的结构.动力学及其功能.用于分析网络结构,建立网络模型,设计新的网络算法,绘制网络等等.安装networkx看以参 ...

  2. 用R的igraph包来画蛋白质互作网络图 | PPI | protein protein interaction network | Cytoscape

    igraph语法简单,画图快速. Cytoscape专业,个性定制. 最终效果图: 当然也可以用Cytoscape来画. 参考:Network visualization with R Cytosca ...

  3. Ubuntu 16.10 安装KolourPaint 4画图工具

    KolourPaint 4画图工具简单实用,可以绘画.视频处理和图标编辑: • 绘画:绘制图表和“手绘” • 视频处理:编辑截图和照片;应用特效 • 图标编辑:绘画剪贴和标识透明化 1.在Ubuntu ...

  4. 初探领域驱动设计(2)Repository在DDD中的应用

    概述 上一篇我们算是粗略的介绍了一下DDD,我们提到了实体.值类型和领域服务,也稍微讲到了DDD中的分层结构.但这只能算是一个很简单的介绍,并且我们在上篇的末尾还留下了一些问题,其中大家讨论比较多的, ...

  5. CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探

    CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码 ...

  6. 从273二手车的M站点初探js模块化编程

    前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...

  7. JavaScript学习(一) —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

  8. .NET文件并发与RabbitMQ(初探RabbitMQ)

    本文版权归博客园和作者吴双本人共同所有.欢迎转载,转载和爬虫请注明原文地址:http://www.cnblogs.com/tdws/p/5860668.html 想必MQ这两个字母对于各位前辈们和老司 ...

  9. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

随机推荐

  1. Windows Phone开发(6):处理屏幕方向的改变

    原文:Windows Phone开发(6):处理屏幕方向的改变 俺们都知道,智能手机可以通过旋转手机来改变屏幕的显示方向,更多的时候,对于屏幕方向的改变,我们要做出相应的处理,例如,当手机屏幕方向从纵 ...

  2. Gradle 多渠道打包的使用和错误分析(转)

    刚接触到android的开发,对什么都陌生的,本文是自己在项目中使用的技术要点总结,大咖遇到可直接飘过..... 1.Gradle 打包(不废话了直接来脚本),将下列脚本放到build.gradle文 ...

  3. android AIDL RPC 机制

    AIDL 这是接口文件的叙述性说明,为了实现android 上述平台RPC ,aapt 在编译时自己主动按照该规则IPC 的接口和对象,作为一个用户只需要 实现在服务侧的界面 2 在clientbin ...

  4. hdu 4557 非诚勿扰 vector的应用 原来vector 可以删除指定位置元素 不过消耗大

    非诚勿扰 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Total Submi ...

  5. Java泛型中extends和super的理解(转)

    E – Element (在集合中使用,因为集合中存放的是元素) T – Type(Java 类) K – Key(键) V – Value(值) N – Number(数值类型) ? – 表示不确定 ...

  6. Docker镜像与容器命令(转)

    Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.开发者在笔记本上编译测试通过的容器可以批量地在生产环境中部署,包括VMs(虚拟机).bare metal. ...

  7. poj Firing(最大重量封闭图)

    Firing 题目: 要解雇一些人,而解雇的这些人假设人跟他有上下级的关系,则跟他有关系的人也要一起解雇.每一个人都会创造一定的价值,要求你求出在最大的获利下.解雇的人最小. 算法分析: 在这之前要知 ...

  8. 经常使用Log日志打印输出

    /** * log刊物 * @author Jenly * */ public class LogUtils { public static final String TAG = "Jenl ...

  9. ios 多线程开发(一)简介

    简介 线程是在一个程序中并发的执行代码的方法之一.虽然有一些新的技术(operations, GCD)提供了更先进高效的并发实现,OS X和iOS同时也提供了创建和维护线程的接口. 这里将要介绍线程相 ...

  10. Android - 用Fragments实现动态UI - 创建Fragment

    你可以把fragment当作activity中的一个活动模块,它有自己的生命周期,自己接收输入消息,可以在activity运行的时候添加和删除(就像可以在其他activity中重用的"子ac ...