使用附加数据节点数据创建一个正方形答案

【问题标题】：Create a square with additional data node data使用附加数据节点数据创建一个正方形
【发布时间】：2021-04-08 05:15:30
【问题描述】：

我几乎是一个 javascript 菜鸟，并且对 cytoscape 非常陌生（但我用其他语言编写代码）...

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

我想添加一种可能性，而不是当我单击一个节点（比如说 server12345）时，它会打开一个包含与该服务器关联的数据的表（服务器类型等...）。

你有什么想法/例子/指导我可以怎么做：

在特定节点的点击事件上添加功能？
如何使用细胞镜创建“详细信息”表？

提前非常感谢你们！（ps：我在 StackOverflow 上的第一篇文章……）

【问题讨论】：

标签： cytoscape.js

【解决方案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() );
});

您可以阅读events section of the documentation for more details

在你捕捉到这个事件后，我会想办法。

1-) 只需修改 UI 上的现有 HTML 元素。例如在here 中，您可以看到左侧还有一些其他元素。

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

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

【讨论】：