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. Spring Bean的作用域(转)

    Spring Bean的作用域 .singleton  [单例] eg:<bean id="personService" class="com.yinger.ser ...

  2. Unity3D之Vector3.Dot和Vector3.Cross采用

    在Unity3D中.Vector3.Dot表示求两个向量的点积;Vector3.Cross表示求两个向量的叉积.   点积计算的结果为数值,而叉积计算的结果为向量.两者要注意差别开来.   在几何数学 ...

  3. 【原创】leetCodeOj --- Repeated DNA Sequences 解题报告

    原题地址: https://oj.leetcode.com/problems/repeated-dna-sequences/ 题目内容: All DNA is composed of a series ...

  4. Struts的ONGL

    1.什么是OGNL OGNL它是Object Graphic Navigation Language(对象图导航语言)缩写,    它是一个开源项目. Struts2框架使用OGNL作为默认的表达式语 ...

  5. Cocos2d-x实现简单的翻牌效果

    触发器互联网影响找了很多.有自己的点重写一个复杂的sprite类来实现.简单的操作来对引擎的使用CCOrbitCamera实现,但是,也存在一些问题,后变反了. 我在用的仅仅是一个简单的翻牌效果,点击 ...

  6. POJ 1798 Truck History

    Description Advanced Cargo Movement, Ltd. uses trucks of different types. Some trucks are used for v ...

  7. jQuery 焦点图,图像文件js档

    jQuery 焦点图,图片文件在js文件里 演示 XML/HTML Code <div id="photo_container"></div> JavaSc ...

  8. RH033读书笔记(7)-Lab 8 Introduction to String Processing

    Lab 8 Introduction to String Processing Sequence 1: Exercises in string processing 1. Other than the ...

  9. 解决visual studio空格变成很多点号的3种方法

    在用visual studio做网站时不知道按了什么快捷键,所有页面上的空格都变成了点号,就像下图那样. 要解决空格变点号的方法有两种:1.编辑->高级->查看空白2.Ctrl+E 然后按 ...

  10. hdu1004----用java链表实现

    Let the Balloon Rise Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Oth ...