On Cytoscape Drawing

Cytoscape is a JS plugin to do the network diagram. It is very convenient to use and very powerful. This is its site: Click to open the link

Use it to import two files, one is a JS file, and one is a CSS file. Official Web download.

A feature is implemented here. The data is retrieved from the background database and then returned to the front end to generate the network diagram.

Background action will not write, in short, back to the front end is a struts2 <s:iterator value= "UserList" >. First, use Div to show it:

<div id= "hidden" ><s:iterator value= "userlist" > <div align= "left" id= "a" ><s:property value= "p He "/></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 the CSS to hide this part of the DIV:

#hidden {    display:none;}

Then use Document.getElementById.innerHTML in JS to get the value of each div, and finally upload to cytoscape JSON data format.

This completes the pass value, then sets the edge to be able according to own demand to set up.

Another network diagram style can be changed according to the official website of the document, I made a simple diagram. Not very nice:

The data of these points are uploaded from the database to the foreground according to the above method.

On Cytoscape Drawing