0
問題：如何讓cytoscape.js更新partialy - 在這個時刻（在下面的例子中）我知道只有如何重新加載整個圖節點/邊緣集合中的任何變化。（cytoscape.js＆meteor）如何讓cytoscape.js更新partialy
所以如果我正確理解，下面的例子中，功能：
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();
}
將重新充分Cytoscape的曲線圖中，當集合邊緣和/節點被改變時，因爲有Tracker.autorun在客戶端JS：
Tracker.autorun(function() {
updateNetworkData(net);
});
這意味着，整個圖形是越來越重建，每當我改變任何蒙哥邊緣/節點的任何單個值......這實在是太多了，而不是我想要什麼......
所以讓我重複問題： 如何使cytoscape圖刷新只改變節點/邊？ 即當我改變蒙戈節點的屬性名稱，我想Cytoscape中有刷新只有特定節點上以圖形
示例代碼： 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;
}
HTML
<head>
<title>hello</title>
</head>
<body>
<h1>Welcome to Meteor!b</h1>
{{>graf}}
</body>
<template name="graf">
<div id="cy"></div>
</template>
//其基於從https://github.com/maxkfranz/cyedit代碼）