如何在CYTOSCAPE JS中突出显示两个节点之间的路径
How to highlight the path between two nodes in CYTOSCAPE JS
我可以使用cytoscape js
库创建一个图形。我遵循本教程,我这样实现。
$(function(){ // on dom ready
$('#cy').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(id)'
})
.selector('edge')
.css({
'target-arrow-shape': 'triangle',
'width': 4,
'line-color': '#ddd',
'target-arrow-color': '#ddd'
})
.selector('.highlighted')
.css({
'background-color': '#61bffc',
'line-color': '#61bffc',
'target-arrow-color': '#61bffc',
'transition-property': 'background-color, line-color, target-arrow-color',
'transition-duration': '0.5s'
}),
elements: {
nodes: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{ data: { id: 'c' } },
{ data: { id: 'd' } },
{ data: { id: 'e' } },
{ data: { id: 'f' } },
{ data: { id: 'g' } }
],
edges: [
{ data: { id: 'ab', weight: 1, source: 'a', target: 'b' } },
{ data: { id: 'ac', weight: 2, source: 'a', target: 'c' } },
{ data: { id: 'bd', weight: 3, source: 'b', target: 'd' } },
{ data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
{ data: { id: 'cf', weight: 5, source: 'c', target: 'f' } },
{ data: { id: 'cg', weight: 6, source: 'c', target: 'g' } }
]
},
layout: {
name: 'breadthfirst',
directed: true,
roots: '#a',
padding: 5
},
ready: function(){
window.cy = this;
var bfs = cy.elements().bfs('#a', function(){}, true);
var i = 0;
var highlightNextEle = function(){
bfs.path[i].addClass('highlighted');
if( i < bfs.path.length ){
i++;
setTimeout(highlightNextEle, 1000);
}
};
// kick off first highlight
highlightNextEle();
}
});
}); // on dom ready
在我的实现中,我需要突出显示节点d和g之间的路径。
如何找到节点之间的路径并突出显示它们?
使用dijkstra算法可以找到节点之间的路径。
var dijkstra = cy.elements().dijkstra('#e',function(){
return this.data('weight');
},false);
var bfs = dijkstra.pathTo( cy.$('#i') );
完整代码:
$(function(){ // on dom ready
$('#cy').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(id)'
})
.selector('edge')
.css({
'target-arrow-shape': 'triangle',
'width': 4,
'line-color': '#ddd',
'target-arrow-color': '#ddd'
})
.selector('.highlighted')
.css({
'background-color': '#61bffc',
'line-color': '#61bffc',
'target-arrow-color': '#61bffc',
'transition-property': 'background-color, line-color, target-arrow-color',
'transition-duration': '0.5s'
}),
elements: {
nodes: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{ data: { id: 'c' } },
{ data: { id: 'd' } },
{ data: { id: 'e' } },
{ data: { id: 'f' } },
{ data: { id: 'g' } },
{ data: { id: 'h' } },
{ data: { id: 'i' } }
],
edges: [
{ data: { id: 'ab', weight: 1, source: 'a', target: 'b' } },
{ data: { id: 'ac', weight: 2, source: 'a', target: 'c' } },
{ data: { id: 'bd', weight: 3, source: 'b', target: 'd' } },
{ data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
{ data: { id: 'cf', weight: 5, source: 'c', target: 'f' } },
{ data: { id: 'cg', weight: 6, source: 'c', target: 'g' } },
{ data: { id: 'ah', weight: 7, source: 'a', target: 'h' } },
{ data: { id: 'hi', weight: 8, source: 'h', target: 'i' } }
]
},
layout: {
name: 'breadthfirst',
directed: true,
roots: '#a',
padding: 5
},
ready: function(){
window.cy = this;
var dijkstra = cy.elements().dijkstra('#e',function(){
return this.data('weight');
},false);
var bfs = dijkstra.pathTo( cy.$('#i') );
var x=0;
var highlightNextEle = function(){
var el=bfs[x];
el.addClass('highlighted');
if(x<bfs.length){
x++;
setTimeout(highlightNextEle, 500);
}
};
highlightNextEle();
}
});
}); // on dom ready
如果您想突出显示所有可能的路径
event.target
-为起始节点
event.target.successors().animate({
style: { lineColor: 'red' }
});
假设您已经选择了两个节点并将它们存储在source_node
和target_node
中,并且您希望将两者之间的所有内容标记为类'path_element':
p = cy.elements().aStar({root: source_node, goal: target_node, directed: true}).path;
if (p) {
p.filter(function(i,x) { return x != source_node && x != target_node; })
.addClass('path_element');
p.edgesWith(p)
.addClass('path_element');
}
相关文章:
- 查找与锁定和更新调度相关的一个或两个节点模块
- 是否有任何功能可以合并两个JSON数据集并替换旧信息?(节点.JS)
- 在节点中,使用Q,使两个函数并行工作,但只等待第一个函数实现其承诺
- 如何通过在两个节点之间拖放来制作边缘,并在细胞空间中扩展 egdehandle 扩展.js
- Socket.io 在两个节点.js应用之间触发事件
- 通过 HTTP 在两个节点.js服务器之间传输文件
- Socket.io 两个节点应用程序
- 合并两个节点列表而不重复
- 组合具有不同初始设置的两个节点服务器的功能
- D3:对两个节点之间的圆进行动画处理
- d3:计算两个节点之间的线的中点,画一条从它到一个新节点成90度角的线
- 如何在Cytoscape JS中添加两个节点之间的多个偏移边
- 函数,用于比较DOM树中的两个节点文本
- 从强制布局中删除两个节点失败,而一个成功
- 使用不同的端口同时运行两个节点应用程序
- 如何在CYTOSCAPE JS中突出显示两个节点之间的路径
- 是否有一种简单的方法在JQuery中执行两个节点集之间的减法
- jquery DOM两个节点之间的距离
- 如何比较alfresco javascript中的两个节点
- 合并两个节点.具有相似属性的json文件(合并两个具有相似属性的json文件)