Необходимо передать объект узла, созданный в цикле, на края

Я читаю и перебираю файл json, чтобы создать график с узлами и ребрами, используя цитоскейп библиотеки JavaScript, но у меня есть некоторые проблемы новичка. Вот мой псевдокод с псевдоошибками.

1) Создайте новый узел для каждого узла с меткой «x»

2) Для каждого ребра в ребрах создайте ребро с «источником», «целью».

Проблема, с которой я сталкиваюсь, заключается в том, что для создания ребра мне нужно передать каждый объект узла в качестве аргумента (sourceNode, targetNode, {weight: 'y'}, поэтому что-то вроде этого не будет работать

var edge = graph.newEdge({source: graphP.elements.edges[j].data.source},
                                 {target: graphP.elements.edges[j].data.target});

Я попытался создать массив и записать в него каждый новый узел, но в итоге я просто перезаписываю значение имени переменной и получаю массив длиной 1. Пока все мои узлы созданы, мне нужен путь назад и получить доступ к узлам, чтобы создать ребра (и, очевидно, чтобы они не указывали на себя).

Я предполагаю, что это будет своего рода nodeObject.hasKey[label] и сопоставить эту метку, чтобы получить идентификатор узла, а затем создать новое ребро?

Я думал, что я в узле здесь. Любые советы приветствуются. Ниже приведен мой текущий код с прочитанным сокращенным файлом json.

<html>
<head>
  <title>Springy.js image node demo</title>
</head>
<body>
<script src="jquery-1.11.3.js"></script>
<script src="springy.js"></script>
<script src="springyui.js"></script>

<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>-->

<script/>  
$(document).ready(function(){
  $.ajax({
    url: 'https://rawgit.com/theresajbecker/CompBio/master/SuperSmallNodes.json',
    type: 'GET',
    dataType: 'json'
  }).done(function(graphP) {  

    console.log(graphP);


    var graph = new Springy.Graph();

    for ( i = 0  ; i < graphP.elements.nodes.length ; i++ ) { 
        var nodeArray = []
        var Nlabel1 =  graphP.elements.nodes[i].data.label
        var Nlabel2 =  graphP.elements.nodes[i++].data.label
        console.log('Nlabel1')
        console.log(Nlabel1)
        console.log('Nlabel2')
        console.log(Nlabel2)
        var NN1 = graph.newNode({label: Nlabel1})
        var NN2 = graph.newNode({label: Nlabel2})
        nodeArray.push(NN1)
        nodeArray.push(NN2)
        graph.newEdge(NN1,NN2, {weight: .5})

                                                 }
    console.log('NODE ARRAY')
    console.log(nodeArray)  



        console.log('WINDOW')
jQuery(function(){
  var springy = window.springy = jQuery('#springydemo').springy({
    graph: graph,
    nodeSelected: function(node){
      console.log('Node selected: ' + JSON.stringify(node.data));
    }
  });
});

    });  


});
</script>
    <div>
<canvas id="springydemo" width="800" height="400" style="border: 1px solid black;"></canvas>
</div>


</body>
</html>

javascript json graph cytoscape
person tjustbecause    schedule 12.06.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Как минимум, я думаю, вы захотите инициализировать nodeArray вне цикла:

var nodeArray = []
for ( i = 0  ; i < graphP.elements.nodes.length ; i++ ) {

Как бы то ни было, повторная инициализация в каждом цикле объясняет длину 1.

person Mike Hinterberg    schedule 12.06.2015

arrow_upward
0
arrow_downward

Очевидно, я настолько сосредоточился на других проблемах, что не заметил, что инициализировал свой массив внутри цикла. Гений. Однако для справки вот как мне удалось передать объекты sourceNode и targetNode в функцию newEdge.

<html>
<head>
  <title>Springy.js image node demo</title>
</head>
<body>
<script src="jquery-1.11.3.js"></script>
<script src="springy.js"></script>
<script src="springyui.js"></script>

<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>-->

<script/>  
$(document).ready(function(){
  $.ajax({
    url: 'https://rawgit.com/theresajbecker/CompBio/master/SuperSmallNodes.json',
    type: 'GET',
    dataType: 'json'
  }).done(function(graphP) {  

    console.log(graphP);


    var graph = new Springy.Graph();
    var nodeArray = []

    for ( i = 0  ; i < graphP.elements.nodes.length ; i++ ) { 
        var Nlabel1 =  graphP.elements.nodes[i].data.label
        var Nmass =  graphP.elements.nodes[i].data.mass

        var NN1 = graph.newNode({label: Nlabel1}, {'text-outline-width': Nmass});
        nodeArray.push(NN1)
        }
        console.log(nodeArray)

        function getByValue(arr, value) {
          for (var n=0; n < nodeArray.length; n++) {
            if (arr[n].data.label == value) {
            console.log("below should be the object of element")
            return arr[n];
            }
          }
        }


        function getSourceNode(graphP) {
          for (var s=0; s < graphP.elements.edges.length; s++) {
            var getSource = graphP.elements.edges[s].data.source
            var getTarget = graphP.elements.edges[s].data.target
            graph.newEdge(getByValue(nodeArray, getSource),getByValue(nodeArray, getTarget));

        }
        }

    getSourceNode(graphP)


        console.log('WINDOW')
jQuery(function(){
  var springy = window.springy = jQuery('#springydemo').springy({
    graph: graph,
    nodeSelected: function(node){
      console.log('Node selected: ' + JSON.stringify(node.data));
    }
  });
}); 

    });  


});
</script>
    <div>
<canvas id="springydemo" width="800" height="400" style="border: 1px solid black;"></canvas>
</div>


</body>
</html>
person tjustbecause    schedule 16.06.2015