我想在单击节点后突出显示出边。现在,我有这样的代码:
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(id)',
'background-color': '#4286f4'
})
.selector('edge.highlighted')
.css({
'line-color': 'black',
'target-arrow-color': '#b830f7'
})
.selector('edge')
.css({
'curve-style': 'bezier',
'target-arrow-shape': 'triangle',
'width': 4,
'line-color': '#4286f4',
'target-arrow-color': '#4286f4'
}),
//else parameters
});
cy.on('click', function(e){
var edges = cy.edges();
edges.removeClass('highlighted');
});
cy.on('click', 'node', function(e){
var id = e.target.id();
var outgoing = cy.edges("[source='" + id + "']")
outgoing.addClass('highlighted');
});
当线条颜色未由“边缘”选择器设置时,它工作正常,但如果我为边缘设置一些颜色 - 单击节点后新颜色不适用。
最佳答案
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(id)',
'background-color': '#4286f4'
})
.selector('edge.highlighted')
.css({
'line-color': 'black',
'target-arrow-color': '#b830f7'
})
.selector('edge')
.css({
'curve-style': 'bezier',
'target-arrow-shape': 'triangle',
'width': 4,
'line-color': '#4286f4',
'target-arrow-color': '#4286f4'
}),
});
cy.on('click', function(e){
if (e.target === cy || e.target.group() == "edges") {
cy.edges().removeClass('highlighted');
}
else {
cy.edges("[source='" + e.target.id() + "']").addClass('highlighted');
}
});
我认为这应该可以正常工作,您同时调用了两个点击方法,这可能导致了一些问题,请让我知道这是否解决了问题:)。
如果你想有两个单独的点击事件,你可以这样写:
cy.on('click', function(e){
if (e.target === cy || e.target.group() == "edges") {
cy.edges().removeClass('highlighted');
});
cy.on('click', 'node', function(e){
cy.edges("[source='" + e.target.id() + "']").addClass('highlighted');
});
关于javascript - 使用 Cytoscape JS 突出显示边缘不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49156044/