Cytoscape.js-查找所有公共节点并保留它们

如何解决Cytoscape.js-查找所有公共节点并保留它们

我有一个图：B-> A，C-> A，C-> D，其中节点B和节点C的类型相同。

我只想查找并保留节点A之间共享的公共节点。 如何在保留其余图的同时过滤并删除节点C-> D？

解决方法

您可以使用一些便捷的方法过滤图形：

// get node a
let node_a = cy.$('#a');

// get edges to -> b and c
let connected_edges = node_a.connectedEdges()

// get source and target nodes -> a,b and c
let connedted_nodes = connected_edges.connectedNodes()

// get target nodes -> b and c
let target_nodes = connected_edges.targets()

// Then you can remove the unwanted nodes (you may have to manage the edges too)
let removed_nodes = cy.remove(cy.nodes().not(connected_nodes)

这是一个可行的示例：

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','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'
        }
      },target: 'n3'
        }
      },{
        data: {
          source: 'n2',target: 'n7'
        }
      },target: 'n11'
        }
      },target: 'n16'
        }
      },{
        data: {
          source: 'n3',target: 'n4'
        }
      },{
        data: {
          source: 'n4',target: 'n5'
        }
      },target: 'n6'
        }
      },{
        data: {
          source: 'n6',target: 'n8'
        }
      },{
        data: {
          source: 'n8',target: 'n9'
        }
      },target: 'n10'
        }
      },{
        data: {
          source: 'n11',target: 'n12'
        }
      },{
        data: {
          source: 'n12',target: 'n13'
        }
      },{
        data: {
          source: 'n13',target: 'n14'
        }
      },target: 'n15'
        }
      },]
  },layout: {
    name: 'dagre',padding: 5
  }
});

cy.on('click','node',function(event) {
  // get node a
  let node_a = event.target;

  // get edges to -> b and c
  let connected_edges = node_a.connectedEdges()

  // get source and target nodes -> a,b and c
  let connected_nodes = connected_edges.connectedNodes()

  // get target nodes -> b and c
  let target_nodes = connected_edges.targets()

  // Then you can remove the unwanted nodes
  // If you want,you can save removed_nodes to local storage and add them to the grap at a later point
  let removed_nodes = cy.remove(cy.nodes().not(connected_nodes))
  
  // You can run the layout directly on the new graph
  cy.layout({
    name: 'dagre',padding: 5
  }).run()
});

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

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

<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://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js">
  </script>


  <!-- cyposcape dagre -->
  <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>

  <!-- cytoscape popper -->
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.5/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-popper@1.0.2/cytoscape-popper.min.js"></script>

</head>

<body>
  <div id="cy"></div>
</body>

</html>