(cytoscape.js & meteor )如何让cytoscape.js部分更新
question:Howto允许部分更新cytoscape.js --此时(例如下面)，我只知道如何对节点/边集合中的任何变化重新加载整个图。
因此，如果我正确地理解了，例如，下面的函数：
function updateNetworkData(net) {
var edges = Edges.find().fetch();
var nodes = Nodes.find().fetch();
net.elements().remove(); // make sure evything is clean
if (nodes) net.add(nodes);
if (edges) net.add(edges);
//net.reset() // render layout
net.layout();
}在更改集合边缘/节点时，将重新创建完全的胞景图，因为客户端JS上有Tracker.autorun：
Tracker.autorun(function() {
updateNetworkData(net);
});这意味着，整个图正在重新创建，每当我更改任何边/节点的任何单一值在mongo.这太多了，不是我想要的.
因此，让我重复一个问题：如何使胞景图只刷新已更改的节点/边缘？，即当我在mongo中更改节点的属性名时，我希望胞景只在图中的特定节点上进行刷新。
示例代码：JS
net= "" //main object
if (Meteor.isClient) {
Tracker.autorun(function() {
updateNetworkData(net);
});
Template.graf.rendered = function() {
console.log("on rendered called");
net = cytoscape({
container: document.getElementById('cy'),
ready: function() {
console.log("network ready");
updateNetworkData(net); // load data when cy is ready
},
style: cytoscape.stylesheet()
.selector('node')
.style({
'content': function(e) {
return e.data("name")
},
'font-size': 12,
'text-valign': 'center',
'color': 'white',
'text-outline-width': 2,
'text-outline-color': function(e) {
return e.locked() ? "red" : "#888"
},
'min-zoomed-font-size': 8
// 'width': 'mapData(score, 0, 1, 20, 50)',
// 'height': 'mapData(score, 0, 1, 20, 50)'
})
.selector('edge')
.style({
'content': function(e) {
return e.data("name") ? e.data("name") : "";
},
'target-arrow-shape': 'triangle',
})
});
}
}
if (Meteor.isServer) {
Meteor.startup(function() {
// code to run on server at startup
});
}
function updateNetworkData(net) {
var edges = Edges.find().fetch();
var nodes = Nodes.find().fetch();
net.elements().remove(); // make sure evything is clean
if (nodes) net.add(nodes);
if (edges) net.add(edges);
//net.reset() // render layout
net.layout();
}CSS
#cy {
width : 70vw;
height: 50vw;
position: absolute;
}<head>
<title>hello</title>
</head>
<body>
<h1>Welcome to Meteor!b</h1>
{{>graf}}
</body>
<template name="graf">
<div id="cy"></div>
</template>回答 1
Stack Overflow用户
发布于 2016-01-30 10:59:41
好的。所以过了一段时间，我在meteor中找到了库，它允许挂起一些更新/插入/.在mongodb
matb33 33:收藏-钩子：
https://atmospherejs.com/matb33/collection-hooks
有了这个，我可以逐渐改变图形..。一旦清除了代码，我将通过完整的工作示例。
请注意订阅延迟。我遇到了问题，当查询Collections.Collection订阅是异步函数时，我开始产生空响应。例如，我将在稍后经过。
编辑4.2.2016 -这个图书馆matb33 33:藏书-钩子对我在这里提出的问题没有用.这个钩子只适用于设置钩子的侧.我将在稍后(1-2周)用完整的例子更新问题，这样我就可以接受它作为答案。但是与此同时，如果有人在寻找同样的东西，下面是快速提示。
收藏是下列要素：
Elements.find({...your filter...}).observeChanges({
//hook on adding to mongo - see meteor doc for other hooks
added: function (id, fields) {
}每当您将mongodb添加到Elemenet时，钩子就会被触发(服务器/客户端)
https://stackoverflow.com/questions/34912045
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号