Voy*_*tek 3 javascript graph cytoscape.js
我正在尝试创建一个 cytoscape.js 图表,在该图表中单击一个节点将更改连接到该节点的任何边的颜色。我已经能够找到单个组件,但无法让它们协同工作。我是 JavaScript 和 cytoscape.js 的新手,所以在你的回答中不要做任何假设。
从示例中,可以注册鼠标单击事件,并在这种情况下将节点的 ID 打印到控制台上。
cy.on('tap', 'node', function(evt){
var node = evt.cyTarget;
console.log( node.id() );
});
Run Code Online (Sandbox Code Playgroud)
如果已知纯文本 ID,则可以通过这种方式找到连接到特定节点的边:
cy.edges("[source = 'NodeTextId']")
Run Code Online (Sandbox Code Playgroud)
最后,边缘的颜色可以更新为:
someEdge.animate({
css: {
'line-color': 'red'
}
})
Run Code Online (Sandbox Code Playgroud)
如何使用cy.on()鼠标单击事件返回一个值,该值可用于cy.edges()获取可以迭代以更改边缘颜色的边缘数组?
非常感谢!
您不需要从事件处理程序返回边缘,您可以立即在事件处理程序中进行着色,如下所示:
cy.on("tap", "node", (evt) => {
evt.cyTarget.connectedEdges().animate({
style: {lineColor: "red"}
})
})
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
4253 次 |
| 最近记录: |