Is is possible to have a bidirectional edge in Cytoscape.js?

问题

I want to make a network graph that looks similar to this below image.

Click on this link to view the image

I have searched across and have not found a solution for this using Cytoscape.

回答1:

Yes, you can create bidirectional edges in Cytoscape.js. First, the curve-styles of your edges should be different than 'haystack' (below I set it as 'straight'), because 'haystack' doesn't support edge endpoint arrows. Second, you need to specify source and target endpoint arrow shapes. Possible values for arrow shapes are listed here (I used 'triangle-backcurve' below). If you want one directional edge, you can set the arrow shape only for source or target.

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

  style: [{
      selector: 'node',
      css: {
        'content': 'data(id)',
        'text-valign': 'center',
        'text-halign': 'center'
      }
    },
    {
      selector: 'edge',
      css: {
        'curve-style': 'straight',
      }
    }
  ],
  elements: {
    nodes: [{
        data: {
          id: 'n0'
        }
      },
      {
        data: {
          id: 'n1'
        }
      },
      {
        data: {
          id: 'n2'
        }
      },
      {
        data: {
          id: 'n3'
        }
      }
    ],
    edges: [{
        data: {
          id: 'n0n1',
          source: 'n0',
          target: 'n1'
        }
      },
      {
        data: {
          id: 'n1n2',        
          source: 'n1',
          target: 'n2'
        }
      },
      {
        data: {
          id: 'n2n3',        
          source: 'n2',
          target: 'n3'
        }
      }
    ]
  }
});

cy.getElementById('n0n1').style({'source-arrow-shape': 'triangle-backcurve', 'target-arrow-shape': 'triangle-backcurve'});
cy.getElementById('n1n2').style({'target-arrow-shape': 'triangle-backcurve'});
cy.getElementById('n2n3').style({'source-arrow-shape': 'triangle-backcurve'});

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

#cy {
  height: 95%;
  width: 95%;
  left: 0;
  top: 0;
  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/cytoscape@3.10.0/dist/cytoscape.min.js">
  </script>
</head>

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

</html>

来源：https://stackoverflow.com/questions/58870717/is-is-possible-to-have-a-bidirectional-edge-in-cytoscape-js

标签

javascript

graph

cytoscape.js

vis.js