Question

我正在阅读并循环浏览json文件，使用JavaScript库cytoscape创建一个包含节点和边缘的图形，但是我遇到了一些新手问题。这是我的伪代码w /伪bug。

1）使用标签＆＃39; x＆＃39;

为每个节点创建新节点

2）对于边缘中的每个边缘，使用＆＃39; source＆＃39;，＆＃39; target＆＃39;创建边缘。

我遇到的问题是创建边缘我需要将每个节点对象作为参数传递，（sourceNode，targetNode，{weight：＆＃39; y＆＃39;}所以像这样的东西将不起作用

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

我尝试创建一个数组并将每个新节点写入其中，但我最终会覆盖变量名的值，最后得到一个长度为1的数组。虽然创建了所有节点，但我需要一个返回并访问节点以创建边缘的方式（显然没有它们指向自己）。

我猜它会是某种nodeObject.hasKey [label]并在该标签上匹配以检索节点ID，然后创建新的边缘？

我认为自己在这里结了。任何建议表示赞赏。下面是我当前的代码，其中包含缩写的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>

Answer 1

至少，我认为你想要在循环之外初始化nodeArray：

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

按原样，每个循环中的重新初始化将解释1的长度。

Answer 2

我显然专注于其他问题，我没有看到我在循环中初始化我的数组。天才。但是，作为参考，以下是我能够将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>

需要将循环中创建的节点对象传递给边

2 个答案: