单击 cytoscape.js 时显示传入节点

在使用 cytoscape.js 时，我们可能会需要在点击节点时展示节点的详细信息。本篇介绍如何实现这一功能。

实现思路

我们可以在 click 事件中获取被点击的节点的信息，然后在页面中展示该节点的详细信息。这里我们采用 Bootstrap 实现样式，使用一个 modal 对话框展示节点信息。

代码实现

HTML

首先，我们需要在 HTML 中定义一个 modal 对话框，用于展示节点信息。

<div class="modal fade" id="node-detail-modal" tabindex="-1" aria-labelledby="node-detail-modal-title" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="node-detail-modal-title">节点信息</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <dl class="row">
          <dt class="col-sm-4">编号</dt>
          <dd class="col-sm-8" id="node-detail-id"></dd>
          <dt class="col-sm-4">标签</dt>
          <dd class="col-sm-8" id="node-detail-label"></dd>
          <!-- 更多属性 -->
        </dl>
      </div>
    </div>
  </div>
</div>

上面的 HTML 中，我们定义了一个 id 为 node-detail-modal 的 modal 对话框，并在其中定义了一个列表用于显示节点的详细信息。其中，我们使用 id 属性为 node-detail-id 和 node-detail-label 的 dd 元素分别用于显示节点的编号和标签。我们也可以添加更多的属性来显示节点的其他信息。

JavaScript

其次，我们需要在 JavaScript 中绑定 click 事件，获取被点击的节点信息，并展示在 modal 对话框中。我们可以使用 cy.on() 方法绑定 click 事件，在事件处理函数中获取被点击的节点信息。最后，我们可以使用 jQuery 实现 modal 对话框的展示和隐藏。

cy.on('click', 'node', function(event) {
  var node = event.target;
  
  // 设置 modal 中的节点信息
  $('#node-detail-id').text(node.id());
  $('#node-detail-label').text(node.data('label'));
  // 更多属性
  
  // 显示 modal
  $('#node-detail-modal').modal('show');
});

上面的 JavaScript 中，我们首先使用 cy.on('click', 'node', function(event) { 绑定 click 事件。然后，我们使用 event.target 获取被点击的节点。在处理函数中，我们根据需要设置 modal 中的节点信息，然后使用 $('#node-detail-modal').modal('show'); 显示 modal 对话框。如果需要，我们也可以在 modal 对话框中添加一个按钮，用于隐藏对话框。

结语

本篇介绍了如何在 cytoscape.js 中实现在点击节点时展示节点详细信息的功能。在实现过程中，我们使用了 Bootstrap 的 modal 对话框，并使用 jQuery 实现对话框的显示和隐藏。