CODEWITHSUNDEEP
javascriptcytoscape.js
miika
miika

Reputation: 11

cytoscape.js redundant edges

cytoscape.js to fails to render the graph if the graph has redundant edges/arcs. Why is this happening?

Example:

https://jsfiddle.net/smiccke/mq5t1rw9/4/

$(function() {
  var cy = window.cy = cytoscape({
    container: document.getElementById('cy'),
    ready: function() {},
    style: [{
      selector: 'node',
      css: {
        'content': 'data(name)'
      }
    }, {
      selector: 'edge',
      css: {
        'target-arrow-shape': 'triangle'
      }
    }],
    elements: {
      nodes: [{
        data: {
          id: 'j',
          name: 'Jerry'
        }
      }, {
        data: {
          id: 'e',
          name: 'Elaine'
        }
      }, {
        data: {
          id: 'k',
          name: 'Kramer'
        }
      },
      ],
      edges: [{
        data: {
          source: 'j',
          target: 'e'
        }
      }, {
        data: {
          source: 'j',
          target: 'k'
        }
      }
      ]
    }
  });
});

The graph works if you remove the two redundant edges from the end (j->e, j->e).

It seems like one redundant edge is ok, but two or more is a problem. Any clues why this is so?

As workaround, any nice short-cuts to remove redundant edges from the graph?

Upvotes: 1

Views: 1444

Answers (2)

bendman
bendman

Reputation: 366

Edit: you mention that cytoscape.js fails to render the graph, but it renders fine for me. Are you truly not seeing any graph at all? If so, what browser are you using, and have you checked your code for errors?

Multiple edges between nodes default along the same path as maxkfranz said. You can set the 'curve-style': 'bezier' which will show all of the edges, or use 'haystack-radius': 1 to keep straight lines (play with values between 0 and 1).

I also noticed you have directed arrows turned on. These won't work with the default 'haystack' curve style, so I would suggest you use 'bezier' if you want to visualize directed edges.

Upvotes: 0

maxkfranz
maxkfranz

Reputation: 12242

All the edges are there. You've rendered all parallel edges on top of one another, because that's how your edge style is specified.

Use appropriate style for the type of graph you're rendering. E.g., a multigraph should probably use haystack edges with a non-zero haystack radius or bundled bezier edges.

Refer to curve-style etc. in the docs: http://js.cytoscape.org/#style/edge-line

Upvotes: 3

Related Questions