Preliminary Exploration of Cytoscape plot and Preliminary Exploration of cytoscape

Preliminary Exploration of Cytoscape plot and Preliminary Exploration of cytoscape

Cytoscape is a js plug-in for network diagrams. It is easy to use and powerful. This is its website: Click to open the link

To use this function, you need to import two files: one is a js file and the other is a css file. Download from the official website.

Here, a function is implemented, that is, retrieving data from the background database, then returning to the front-end to generate a network diagram.

The background action will not be written. In short, the result returned to the front end is a struts2 <s: iterator value = "userlist">, which is first displayed in the 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>

Set this part of css to hide this part of div:

#hidden {    display:none;}

In js, the document. getElementById. innerHTML is used to obtain the value of each div, and then transmitted to the json data format of Cytoscape. In this way, the value is passed, and then the edge can be set based on your needs.

In addition, the network chart style can be modified according to the document on the official website. I made a simple graph, which is not very nice:

The data of these points is transmitted from the database to the foreground according to the above method.

Is there any biological drawing software?

Cytoscape, which can be used on the Internet, as well as instructions and special plug-ins, making it easier to draw pictures.