0

Springyの強制指向グラフ レイアウト ライブラリを使用して、優れた強制指向グラフを作成しました。ajax を介してグラフを別のグラフに置き換えると (たとえば、ユーザーがいくつかの設定を変更した後)、両方のグラフが同じキャンバスを占有することがわかりました。

私が探しているもの:古いグラフを完全に削除する必要があるため、キャンバスに存在するのは新しいグラフだけです。

簡略化されたユースケース jsfiddle は次のとおりです: http://jsfiddle.net/XPAqX/

// make a new graph
var graph = new Springy.Graph();

// make some nodes
var spruce = graph.newNode({label: 'Norway Spruce'});
var fir = graph.newNode({label: 'Sicilian Fir'});

// connect them with an edge
graph.newEdge(spruce, fir);


$('#my_canvas').springy({ graph: graph, nodeSelected: function(node) {
    alert(node.data.label);
} });

//now, I let the user update the dataset with ajax and re-render the graph. 

graph = null;
graph = new Springy.Graph();



// make some nodes
var kittens = graph.newNode({label: 'Furry Baby Cats'});
var puppies = graph.newNode({label: 'Fluffy Baby Dogs'});

// connect them with an edge
graph.newEdge(kittens,puppies);


$('#my_canvas').springy({ graph: graph });

簡単なメモ: springy github の問題として相互投稿されましたが、まだ回答はありません: https://github.com/dhotson/springy/issues/47

4

2 に答える 2

1

Springy Graph オブジェクトは少し誤解を招きます。ソースをチェックアウトすると、実際にノードを保持するのは、Springy コンテキスト オブジェクト (サインルトン) 全体の単なるアクセス レイヤーであることがわかります。そのためaddNode、Graph オブジェクトではなく、単一の Springy コンテキスト オブジェクトにノードを追加します。

ここでremoveNode行ったように、最初に古いノードを削除するために使用する必要があります。

わかりやすくするために: はい、Graph オブジェクトにはノードのリストが含まれていますが、それらはレンダラーに渡され、レンダラーは「springyfy」した各キャンバス DOM ノードの単一のインスタンスです。Graph インスタンスを変更しても、レンダラーの内部コンテキストはリセットされません。

より複雑な解決策は、SpringyUI (jQuery プラグイン) コードを変更し、内部レンダラーをリセットする $('#canvas').springy('reset') メソッドを処理することです。SpringyUI コードを見ると、それは簡単ではないと言えます。

于 2013-09-06T09:20:26.347 に答える
0

編集：（私の間違ったものをすべて削除しました）

実用的な解決策を得るには：

springyui.js に次のクリア関数のいずれかを追加します。

this.clear = function(){
   for(var i=graph.nodes.length-1;i>=0;i--){
     graph.removeNode(graph.nodes[i]);
   }
}

また

this.clear = function(){
    graph.nodeSet = {};
    graph.nodes = [];
    graph.edges = [];
    graph.adjacency = {};
    graph.notify();
}

次のように使用します。

イニシャル：

//don't call this twice!!
var graph = new Springy.Graph();
var springy=jQuery('#yourcanvas').springy({graph: graph});

ワークフロー: 

function makeGraph(){
    springy.clear();
    //generate your graph hear
    graph.addNodes(...)
}
于 2014-01-23T08:36:41.343 に答える