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

Question

我想在我的 AngularJS 应用程序的侧面板中显示有关选定节点的详细信息。如何动态绑定选中的节点和侧面板中的数据？

Answer 1

与其他任何事情一样，适当地更新您的模型，以便模板呈现您想要的数据。例如，您可以将 node.json() 传递给组件。

Answer 2

我将其设计为与相当旧的 Cytoscape.js 版本 (2.0.2) 一起使用，但据我查看文档，它仍然是一样的。您可以在下面找到一个最小的示例。

你可以这样做：

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 中保存点击的节点？

How do I save clicked node in cytoscape.js?

angularjs

data-binding

cytoscape.js