如何将单击的节点保存在cytoscape.js中？

Question

I want to show the details about a selected node in a side panel in my AngularJS application. 我想在AngularJS应用程序的侧面板中显示有关选定节点的详细信息。 How can I dynamically bind the selected Node with the data in the side panel? 如何动态地将所选节点与侧面板中的数据绑定？

Answer 1

Like anything else, update your model appropriately such that the template renders the data you want. 像其他任何东西一样，适当地更新模型，以使模板呈现所需的数据。 You could pass node.json() to a component, for example. 例如，您可以将node.json()传递给组件。

Answer 2

I designed this to use with a pretty old Cytoscape.js version (2.0.2), but as far as I could check in the documentation, it stills the same. 我将其设计为与相当旧的Cytoscape.js版本（2.0.2）一起使用，但据我可以查阅文档，它仍然相同。 Below you can find a minimal example. 您可以在下面找到一个最小的示例。

You could do something like this: 您可以执行以下操作：

 var cy = cytoscape({ container: document.getElementById('cy'), showOverlay: true, minZoom: 1, maxZoom: 1, layout: { fit: true }, elements: { // nodes "nodes": [{ "data": { "id": "n1", "name": "node 1", "description": "Ars Gratia Artis 1" } }, { "data": { "id": "n2", "name": "node 2", "description": "Ars Gratia Artis 2" } }], "edges": [{ "data": { "source": "n1", "id": "e1", "target": "n2", "type": "belongs-to" } }] }, ready: function() { var stringStylesheet = "node {" +"content: data(name);" +"text-valign: center;" +"color: white;" +"text-outline-width: 2;" +"text-outline-color: #888;" +"}" +"edge {" +" target-arrow-shape: triangle;" +"content: data(type);" +"text-outline-color: #FFF;" +"text-outline-opacity: 1;" +" text-outline-width: 2;" +" text-valign: center;" +" color: #777;" +"width: 2px;" +"}" +":selected {" +"background-color: black;" +"line-color: black;" +"target-arrow-color: black;" +"source-arrow-color: black;" +"color: black;" +"}" +".faded {" +" opacity: 0.25;" +"text-opacity: 0;" +"}"; cy = this; cy.style( stringStylesheet ); //You can have different panels for editing edges and nodes. var nodeClicked = cy.on('tap', 'node', function(e) { //var edgeClicked = cy.on('tap', 'edge', function(e) { //Here I use pure jQuery to hide the edge-edition panel //and show the node-edition one. //$('div.edge-edition').hide(); $('div.node-edition').show(); //if you click in a specific node, unselect any other //previously selected element from the graph cy.elements().unselect(); //* identify which node was clicked var node = e.target; console.log("node clicked: " + node.data('name')); //finally, fullfills forms of the panel with node data $('.node-name').val(node.data('name')); $('.node-description').val(node.data('description')); }); } });

 html { height: 98%; } body { font-family: Verdana, Arial, Times New Roman; font-size: 11px; height: 100%; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cy { height: 85%; width: 60%; float: left; position: relative; top: 10px; left: 0px; border: 1px solid #aaa; border-radius: 5px; -webkit-border-radius: 5px; padding: 0px; display: block; z-index: 1; } #edition { float: right; height: 85%; width: 39.5%; position: relative; top: 10px; border: 1px solid #aaa; border-radius: 5px; -webkit-border-radius: 5px; padding: 0px; display: block; z-index: 1; } input, textarea { border: 1px solid #aaa; border-radius: 5px; -webkit-border-radius: 5px; padding: 5px; z-index: -1; } .node-name, .node-description { max-width: 350px; width: 250px; }

 <script src="https://rawgit.com/cytoscape/cytoscape.js/master/dist/cytoscape.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <!DOCTYPE html> <html lang="en-us"> <head> </head> <body> <div id="cy"></div> <div id="edition"> <div class="node-edition"> <form> <table> <tr> <td>Name</td> <td> <input type="text" class="node-name"> </td> </tr> <tr> <td>Description</td> <td> <textarea class="node-description"></textarea> </td> </tr> </table> </form> </div> </div> </body> </html>

如何将单击的节点保存在cytoscape.js中？

问题描述

2 个解决方案

解决方案1
0 2017-10-03 19:49:41

解决方案2
0 已采纳 2017-10-09 07:20:53

如何将单击的节点保存在cytoscape.js中？

问题描述

2 个解决方案

解决方案1 0 2017-10-03 19:49:41

解决方案2 0 已采纳 2017-10-09 07:20:53

解决方案1
0 2017-10-03 19:49:41

解决方案2
0 已采纳 2017-10-09 07:20:53