如何在Cytoscape中放大所选节点

Question

我对javascript和cytoscape都很陌生。

我想要生成一张图表（仍然是硬编码）。

1. 现在我需要缩放一个点击的节点..
2. 当一个节点被点击时，同时显示另一个图表。

感谢您的帮助。

谢谢。

- mihiHarshana

---

点击节点放大在Cytoscape中，又称为在Cytoscape中缩放到选定的节点，或者点击节点适应图形在Cytoscape中，以及在d3js中可缩放的树状图。链接分别为：https://ivis-at-bilkent.github.io/cytoscape.js-view-utilities/demo.html 和 https://dev59.com/7X7aa4cB1Zd3GeqPr48p#23014149 以及 http://bl.ocks.org/guglielmo/16d880a6615da7f502116220cb551498 - milahu

Answer 1

您可以像这样将节点的点击事件绑定到cytoscape上：

您可以将点击事件绑定到cytoscape上，如下所示：

cy.bind('click ', 'node', function (evt) {
    var pos = cy.nodes("[id = " + evt.target.data().id + "]").position();
    cy.zoom({                       // Zoom to the specified position
      level: yourLevel,             // 0 <= yourLevel, maybe try out 1,2,3,4... and see what fits
      position: pos
    });
});

要显示另一个图表，只需执行相同的绑定函数并将元素添加到空白图表中：

cy.bind('click', 'node', function (evt) {
    cy.remove(cy.elements());                 // remove elements and reset graph
    cy.reset();                               // graph is empty now
    cy.add(yourElements);                     // add new elements
    cy.elements().layout(yourLayout).run();   // give them a layout
});

最后，您可能希望使用cy.unbind()取消绑定，并再次绑定，以确保您不会多次调用这些绑定。

顺祝商祺！

- Stephan T.