使用其他数据节点数据创建一个正方形

Question

我基本上是一个javascript noob，对cytoscape非常陌生(但我用其他语言编写代码(。。。

我正在尝试使用Cytoscape来绘制网络中可用的服务器。实际上，为每台服务器创建一个节点及其关系非常简单。

我想添加一种可能性，即当我单击一个节点(比如server12345(时，它会打开一个包含与该服务器相关联的数据的表(servertype等(

你对我如何做到有什么想法/例子/指导吗

1. 是否在特定节点的单击事件上添加功能
2. 如何使用cytoscope创建详细信息表

非常感谢大家！(附言：我在StackOverflow上的第一篇文章…(

Answer 1

好问题。

首先，你可以像下面的一样捕捉cytoscape.js的click事件

cy.nodes().on('click', function(e){
var clickedNode = e.target;
console.log(clickedNode.id());
});

或者你也可以使用cytoscape.js 的tap事件

cy.on('tap', 'node', function(evt){
var node = evt.target;
console.log( 'tapped ' + node.id() );
});

您可以阅读文档的事件部分以了解更多详细信息

在你捕捉到这一事件后，我会设法。

1-(只需修改UI上现有的HTML元素。例如，在这里，你可以看到左侧还有一些其他元素。

所以你可以像一样编写代码

cy.on('tap', 'node', function(evt){
var node = evt.target;
document.getElementById('someOtherElementOnUI').innerHTML = JSON.stringfy(node.data());
});

这将简单地修改一些其他UI元素(HTML元素(，并将其内容更改为所选节点的数据。

2-(您可以使用一些扩展，如Cytoscape.js-popper，并像工具提示一样动态显示数据。你可以查看我的答案https://stackoverflow.com/a/66813720/3209523