在 BFS cytoscape Javascript 中获取 nodeID答案

【问题标题】：Get nodeID in BFS cytoscape Javascript在 BFS cytoscape Javascript 中获取 nodeID
【发布时间】：2019-06-07 09:15:00
【问题描述】：

我正在使用 cytoscape.js 在自定义图形中进行 BFS 搜索。我需要添加在此搜索中访问过的每个节点 ID。我尝试过类似的方法

document.getElementById("console").innerHTML += v.id;

在bfs函数中

var bfs = cy.elements().bfs('#1', function(v, e, u, i, depth){}, false);

但它不起作用，我是 JS 和编程新手，如有任何建议，我将不胜感激。

【问题讨论】：

您是否尝试将选择添加到 Bfs 函数中的回调？
嗨，Darkeez，感谢您分享有关此主题的问题！只是关于标记的小事：cytoscape 和cytoscape.js 在许多方面都完全不同，如果使用另一个，则不应标记。对于以后的帖子，请考虑使用 cytoscape.js 标记供具有 js 知识的人查看您的问题。谢谢！
你还在解决这个问题吗？

标签： javascript graph cytoscape.js

【解决方案1】：

如果你想获取bfs的每个访问节点的id，你可以像here解释的那样使用访问函数：

var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),

  boxSelectionEnabled: false,
  autounselectify: true,

  style: [
    {
      selector: 'node',
      css: {
        'content': 'data(id)',
        'text-valign': 'center',
        'text-halign': 'center',
        'height': '60px',
        'width': '60px',
        'border-color': 'black',
        'border-opacity': '1',
        'border-width': '10px'
      }
    },
    {
      selector: '$node > node',
      css: {
        'padding-top': '10px',
        'padding-left': '10px',
        'padding-bottom': '10px',
        'padding-right': '10px',
        'text-valign': 'top',
        'text-halign': 'center',
        'background-color': '#bbb'
      }
    },
    {
      selector: 'edge',
      css: {
        'target-arrow-shape': 'triangle'
      }
    },
    {
      selector: ':selected',
      css: {
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      }
    }
  ],

  elements: {
            nodes: [
              { data: { id: 'n0' } },
              { data: { id: 'n1' } },
              { data: { id: 'n2' } },
              { data: { id: 'n3' } },
              { data: { id: 'n4' } },
              { data: { id: 'n5' } },
              { data: { id: 'n6' } },
              { data: { id: 'n7' } },
              { data: { id: 'n8' } },
              { data: { id: 'n9' } },
              { data: { id: 'n10' } },
              { data: { id: 'n11' } },
              { data: { id: 'n12' } },
              { data: { id: 'n13' } },
              { data: { id: 'n14' } },
              { data: { id: 'n15' } },
              { data: { id: 'n16' } }
            ],
            edges: [
              { data: { source: 'n0', target: 'n1' } },
              { data: { source: 'n1', target: 'n2' } },
              { data: { source: 'n1', target: 'n3' } },
              { data: { source: 'n2', target: 'n7' } },
              { data: { source: 'n2', target: 'n11' } },
              { data: { source: 'n2', target: 'n16' } },
              { data: { source: 'n3', target: 'n4' } },
              { data: { source: 'n3', target: 'n16' } },
              { data: { source: 'n4', target: 'n5' } },
              { data: { source: 'n4', target: 'n6' } },
              { data: { source: 'n6', target: 'n8' } },
              { data: { source: 'n8', target: 'n9' } },
              { data: { source: 'n8', target: 'n10' } },
              { data: { source: 'n11', target: 'n12' } },
              { data: { source: 'n12', target: 'n13' } },
              { data: { source: 'n13', target: 'n14' } },
              { data: { source: 'n13', target: 'n15' } },
            ]
          },

  layout: {
    name: 'dagre',
    padding: 5
  }
});


// here is the important part of the code
var idList = [];            // list for id storage
var bfs = cy.elements().bfs({
  roots: '#n0',
  visit: function (v, e, u, i, depth) {
    console.log("The id of the node " + i +  " is " + v.id());   // i is the number of the i'th visited node, v is the node itself
    idList[i] = v.id();
  },
  directed: false
});

body { 
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 75%;
  position: absolute;
  left: 0;
  top: 0;
  float: left;
}

<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
 <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
 <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>

【讨论】：