Контекст

Я хочу использовать cytoscape.js для визуализации графики. В то время как я способен с множеством языков (C++, Mathematica, R и т. Д.), Я новичок в Javascript, JSON, HTML и CSS. Таким образом, было бы выгодно изучать эти языки в этом случае использования (используя графики с cytoscape.js). Помните об этом в своем ответе.Загрузка и использование JSON для Cytoscape.js

Я ранее спрашивал, как [дистанционно загрузить cytoscape.js и how to get graphs display (requires a div). С тех пор я создал скрипт, который превращает график, представленный на одном из других языков, которые я использую, в формат JSON, указанный here. Хотя я могу просто скопировать все это прямо в мою программу, для крупных сетей, которые, безусловно, являются плохим способом ее реализации. Пример вывода моего сценария находится внизу.

Вопрос

Учитывая JSON объект/файл, как я могу сделать следующее (?):

загрузить его в cytoscape.js без копирования вставки кода.
Ссылка на него после загрузки. (Например, основное объяснение того, как JSON синтаксис для использования в cytoscape.js)

Выход сценария

cytoscape({ 

container: document.getElementById('cy'), 

elements: [ 
{// node Node 1 
    group: 'nodes', 

    data: { 
     id: 'Node 1' 
    }, 

    selected: false, 

    selectable: true, 

    locked: false, 

    grabbable: true, 

    selectable: true, 

}, 
{// node Node 2 
    group: 'nodes', 

    data: { 
     id: 'Node 2' 
    }, 

    selected: false, 

    selectable: true, 

    locked: false, 

    grabbable: true, 

    selectable: true, 

}, 
{// node Node 3 
    group: 'nodes', 

    data: { 
     id: 'Node 3' 
    }, 

    selected: false, 

    selectable: true, 

    locked: false, 

    grabbable: true, 

    selectable: true, 

}, 
{// edge 1_2 
    group: 'edges', 

    data: { 
     id: '1_2', 
     source: '1', 
     target: '2' 
    } 
}, 
{// edge 2_3 
    group: 'edges', 

    data: { 
     id: '2_3', 
     source: '2', 
     target: '3' 
    } 
}, 
{// edge 3_1 
    group: 'edges', 

    data: { 
     id: '3_1', 
     source: '3', 
     target: '1' 
    } 
} 
], 
style: [ 
    { 
     selector: 'node', 
     style: { 
      'content': 'data(id)' 
     } 
    } 
] 

});

источник

2016-10-29 SumNeuron

<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>

в cyto.js вы можете вводить достоверные данные в формате JSON, например

{ 
    "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" 
       } 
       }]  
    }

источник

2016-12-19 10:08:03

Давайте предполагать, у вас есть файл JSON в той же папке, что и файл index.html, и ваш сервер бежит. Сначала запросите json-файл через http-запрос (используя plain javascript или jquery).

Если ваш файл json имеет тот же формат, что и свойства elements, вы можете просто проанализировать его на объект javascript и установить его. Например.

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 
 
    }); 
 
}

если свойство JSON отличается от формата Cytoscape, тогда вы должны программно преобразовать его.

источник

2016-10-30 00:54:03

У меня есть много вопросов, но не могли бы вы, возможно, ходить как это работает? – SumNeuron

Если вы используете API 'fetch()', вы можете просто указать 'elements: fetch ('./ my-dir/myfile.json')', поскольку Cytoscape принимает обещания для ваших данных – maxkfranz

Загрузка и использование JSON для Cytoscape.js

Вопрос

Выход сценария

ответ

Смежные вопросы