在 Cytoscape JS 中突出显示多个边缘
Highlight multiple edges in Cytoscape JS
我有一个这样的无向图:
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
// nodes
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{ data: { id: 'c' } },
{ data: { id: 'd' } },
// edges
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
},
{
data: {
id: 'bc',
source: 'b',
target: 'c'
}
},
{
data: {
id: 'cd',
source: 'c',
target: 'd'
}
}
],
style: [
{
selector: 'node',
style: {
shape: 'hexagon',
'background-color': 'red',
label: 'data(id)'
}
}],
layout: {
name: 'grid'
}
});
如您所见,您可以使用 c
和 d
从 a
转到 d
。我想要实现的是,如果边缘 ab
被突出显示,边缘 bc
和 cd
也将被突出显示。有没有办法做到这一点?我在 Internet 上找不到任何关于此的资源...谢谢。
查看包含的算法,例如 Floyd-Warshall or Dijkstra。从他们的输出中,您应该能够为相关边缘生成突出显示。
例如
var dijkstra = cy.elements().dijkstra('#an_id')
var path = dijkstra.pathTo( cy.elements('node#another_id'))
path.forEach(function(ele){
if (ele.isEdge()){
ele.addClass("class_that_has_highlight_styling")
}
})
我有一个这样的无向图:
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
// nodes
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{ data: { id: 'c' } },
{ data: { id: 'd' } },
// edges
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
},
{
data: {
id: 'bc',
source: 'b',
target: 'c'
}
},
{
data: {
id: 'cd',
source: 'c',
target: 'd'
}
}
],
style: [
{
selector: 'node',
style: {
shape: 'hexagon',
'background-color': 'red',
label: 'data(id)'
}
}],
layout: {
name: 'grid'
}
});
如您所见,您可以使用 c
和 d
从 a
转到 d
。我想要实现的是,如果边缘 ab
被突出显示,边缘 bc
和 cd
也将被突出显示。有没有办法做到这一点?我在 Internet 上找不到任何关于此的资源...谢谢。
查看包含的算法,例如 Floyd-Warshall or Dijkstra。从他们的输出中,您应该能够为相关边缘生成突出显示。
例如
var dijkstra = cy.elements().dijkstra('#an_id')
var path = dijkstra.pathTo( cy.elements('node#another_id'))
path.forEach(function(ele){
if (ele.isEdge()){
ele.addClass("class_that_has_highlight_styling")
}
})