显示在cytoscape.js中显示节点统计信息的弹出窗口

Question

自上周开始以来开始探索cytoscape.js。简直太神奇了。我正在使用cytoscape.js作为我的一个用例，其中我需要显示一个飞行网络图。在这里，我想在点击机场（节点）时显示一个小弹出窗口，其中包含一些统计数据，例如度，pagerank等。任何指针都会有所帮助。供您参考，这是我写的代码。我可以准确地看到图表。但我缺少的是可以在点击节点时显示弹出窗口的代码片段。在此先感谢您的帮助

<script>
var cy1 = cytoscape({
container: document.getElementById('cy1'),
 layout: {
 name: 'concentric',
 concentric: function( node ){
          return node.degree();
        },
        levelWidth: function( nodes ){
          return 15;
        }

  },

  style: [ // the stylesheet for the graph
  { 
  selector: 'node',
  style: {
    'background-color': '#666',
    'label': 'data(id)'
  }
  },

  {
  selector: 'edge',
  style: {
    'width': 1,
    'line-color': '#ccc',
    'target-arrow-color': '#ccc',
    'target-arrow-shape': 'triangle'
  }
 }
 ],
 elements: {
    nodes: airportsJSON,
    edges: edgeJSON
 }
});

var pr = cy1.elements().pageRank();
console.log("Statistics*****");
for(i = 0; i<cy1.nodes().length; i++)
{ 
console.log(cy1.nodes()[i].data('id') + "->"+cy1.nodes()[i].indegree(true) + " "+cy1.nodes()[i].outdegree(true) + " "+cy1.nodes()[i].totalDegree(true));
}

console.log("done");
</script>

Answer 1

尝试使用qtip扩展程序：https://github.com/cytoscape/cytoscape.js-qtip

它允许您在元素上显示工具提示/弹出窗口。