0

我正在读取并循环遍历一个 json 文件，以使用 JavaScript 库 cytoscape 创建一个带有节点和边的图形，但遇到了一些新手问题。这是我的带有伪错误的伪代码。

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] 并匹配该标签以检索节点 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>
4

2 回答 2

0

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

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

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

于 2015-06-12T17:38:13.413 回答
0

我显然太专注于其他问题，以至于我没有看到我正在循环内初始化我的数组。天才。但是，作为参考，这里是我如何能够将 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>
于 2015-06-16T22:27:23.803 回答