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. 【hadoop之翊】——基于CentOS的hadoop2.4.0伪分布安装配置

    今天总算是把hadoop2.4的整个开发环境弄好了,包括 windows7上eclipse连接hadoop,eclipse的配置和測试弄得烦躁的一逗比了~ 先上一张成功的图片,hadoop的伪分布式安 ...

  2. lua 远程调试 【zeroBrane 使用mobdebug】(good转)

    最近基于业务需求,学习了如何使用zeroBrane这个IDE实现C/S 模式下的 lua远程调试,废话不多,上效果图: ---------------------------------------- ...

  3. mysql float double 类型

    1.float类型 float列类型默认长度查不到结果.必须指定精度. 比方 num float, insert into table (num) values (0.12); select * fr ...

  4. mac_Mac环境下怎样编写HTML代码?

    在Mac环境下,使用默认的文本编辑器编写的HTML的源代码, 使用不同的浏览器打开后,依旧还是显示源代码 推荐使用UltraEdit,问题就迎刃而解了

  5. Android游戏源代码合集(主要是AndEngine和Libgdx的)

    近期在网络上看到有网友抱怨Android游戏源代码找不到,所以小弟收集了一些AndEngine和Libgdx的游戏源代码,以Eclipseproject的形式配置好环境,再陆续发出(某引擎避嫌,不在此 ...

  6. effective c++ 条款10 handle assignment to self operator =

    非强制性,但是个好习惯 当使用连锁赋值时很有用 x=y=z=10; class Window { public: Window& operator=(int size) { ... retur ...

  7. C++编程有趣的标题1 于1~9填写的运算结果的中间符号等于100

    于1 2 3 4 5 6 7 8 9将九个数字"+"要么"-"符号使得结果100,编程的所有组合. 注意:数字顺序不能改变 <pre name=" ...

  8. Linux(Centos)中tcpdump参数用法详解(转)

    在linux下进行编程开发的人尤其是网络编程的人会经常需要分析数据包,那么一定会用到tcpdump,下面就是关于tcpdump的使用方法说明(1). tcpdump的选项 -a       将网络地址 ...

  9. Android学习路径(两)项目文件本身使用场景和文件演示

    ios讨论群1群:135718460  1.src文件:java源码存放文件夹 2.gen 文件:自己主动生成全部由android开发工具自己主动生成的文件,文件夹中最重要的就是R.java文件,这个 ...

  10. C++ - 内置类型的最大值宏定义

    内置类型的最大值宏定义 本文地址: http://blog.csdn.net/caroline_wendy/article/details/24311895 C++中, 常常会使用, 某些类型的最大值 ...