0

私は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] であり、そのラベルで一致してノード 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 に答える