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 });

快速说明：交叉发布为弹性 github 上的一个问题，但还没有答案：https ://github.com/dhotson/springy/issues/47

4

2 回答 2

1

Springy Graph 对象有点误导。如果您查看源代码，您会发现它只是整个 Springy 上下文对象（一个signleton）的访问层，它实际上包含您的节点，因此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 回答