Cytoscape中通过节点ID访问其全部JSON属性的实现方法

安全阿岳

2026-10-2

实现方案

Cytoscape节点实例本身存储了所有初始化时传入的data字段属性，不需要额外通过ID查询，直接从点击事件的目标对象中提取即可。

基础实现（直接展示完整JSON）

修改你的事件回调代码如下：

cy.on('tap', 'node', function(evt){
  // 调用.data()不传参数即可获取节点全部data属性
  const fullNodeData = evt.target.data();
  // 格式化JSON字符串，缩进为2个空格
  const formattedJson = JSON.stringify(fullNodeData, null, 2);
  // 写入展示区域，建议给#nodeInfo加CSS样式white-space: pre-wrap保留格式
  document.getElementById("nodeInfo").textContent = formattedJson;
});

如果你需要单独获取某一个属性，直接给.data()传属性名即可，例如：

取商家名称：evt.target.data('name')
取商家属性集合：evt.target.data('attributes')
取营业时间：evt.target.data('hours')

进阶实现（结构化展示，可读性更高）

如果需要做成更易读的字段拆分展示，可以参考下面的代码：

cy.on('tap', 'node', function(evt){
  const d = evt.target.data();
  let showHtml = `
    <h3>${d.name}</h3>
    <p>📍 地址：${d.address}，${d.city} ${d.state} ${d.postal_code}</p>
    <p>⭐ 评分：${d.stars} | 评价数：${d.review_count}</p>
    <p>🏷️ 分类：${d.categories}</p>
    <h4>⏰ 营业时间</h4>
    <ul>
  `;
  // 遍历渲染营业时间
  for (const [day, time] of Object.entries(d.hours)) {
    showHtml += `<li>${day}：${time}</li>`;
  }
  showHtml += `</ul><h4>⚙️ 商家属性</h4><ul>`;
  // 遍历渲染所有属性
  for (const [key, value] of Object.entries(d.attributes)) {
    showHtml += `<li>${key}：${value}</li>`;
  }
  showHtml += `</ul>`;
  document.getElementById("nodeInfo").innerHTML = showHtml;
});