发表新帖
发表新帖

Loading and using JSON for Cytoscape.js

后端 未结
关注
2 1719
余生分开走
余生分开走 2021-02-09 19:37

Context

I want to use cytoscape.js for visualizing graphs. While I am capable with a myriad of languages (C++, Mathematica,

相关标签:
2条回答
  • 长情又很酷
    2021-02-09 20:07 

    <head>
    <title></title>
    <script src="js/vendor/cytoscape.min.js"></script>
    <script src="js/vendor/jquery.min.js"></script>
</head>

<style>
    #cy {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }
</style>

<body>
    <div id="cy"></div>
    <script>
        $.getJSON("cyto.js", function (data) {
            //console.log(data);
            var cy = cytoscape({
                container: document.getElementById('cy'),
                elements: data,
                style: [
                    {
                        selector: 'node',
                        style: {
                            'label': 'data(label)',
                            'width': '60px',
                            'height': '60px',
                            'color': 'blue',
                            'background-fit': 'contain',
                            'background-clip': 'none'
                        }
                    }, {
                        selector: 'edge',
                        style: {
                           'text-background-color': 'yellow',
                            'text-background-opacity': 0.4,
                            'width': '6px',
                            'target-arrow-shape': 'triangle',
                            'control-point-step-size': '140px'
                        }
                    }
                ],
                layout: {
                    name: 'circle'
                }
            });
        });
    </script>
</body>

    in cyto.js you can input valid JSON data, for example

      {
    "nodes": [
            {
            "data": {"id": "a", "label": "Gene1"}
            },
            {
            "data": {"id": "b", "label": "Gene2"}
            },
            {
            "data": {"id": "c", "label": "Gene3"}
            },
            {
            "data": {"id": "d", "label": "Gene4"}
            },
            {
            "data": {"id": "e", "label": "Gene5"}
            },
            {
            "data": {"id": "f", "label": "Gene6"}
            }
    ],
            "edges": [
            {
            "data": {
            "id": "ab",
                    "source": "a",
                    "target": "b"
            }
            },
            {
            "data": {
            "id": "cd",
                    "source": "c",
                    "target": "d"
            }
            },
            {
            "data": {
            "id": "ef",
                    "source": "e",
                    "target": "f"
            }
            },
            {
            "data": {
            "id": "ac",
                    "source": "a",
                    "target": "d"
            }
            },
            {
            "data": {
             "id": "be",
                    "source": "b",
                    "target": "e"
                }
                }]    
    }
    0 讨论(0)
  • 别那么骄傲
    2021-02-09 20:17

    Let's presume you have a json file in the same folder as your 'index.html', and your server is running. First request the json file via a http request (using plain javascript or jquery ).

    If your json file has the same format as the elements properties, you can just parse it to a javascript object and set it. E.g.

    var myObject = {};
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
      myObject = JSON.parse(this.responseText);
      initCytoscape();
  }
};
xhttp.open("GET", "myJson.json", true);
xhttp.send();

function initCytoscape() {
  cytoscape({
    container: document.getElementById('cy'),
    elements: myObject
  });
}

    if the json property is different than cytoscape's format, then you have to programatically convert it.

    0 讨论(0)
 看不清?
提交回复
热议问题