CODEWITHSUNDEEP
cytoscape.js
Andrew Serff
Andrew Serff

Reputation: 2127

Displaying content on top of an edge in Cytoscape.js

In my graph, each node would represent a state and the edges are allowed transitions between those states. I also allow there to be actions that are performed when there is a transition from one state to another, so the actions are attached to the edge between the two states. I'm trying to figure out a way to visualize those actions on the edges. It seems the only thing I can put on an edge is a label using the content of the styling. I had hoped that I could set content to a function to allow me to return some html content, but that doesn't seem to work. Is there another way I could do this? I had also thought of possibly creating nodes between the state nodes, but with there only being one nodes collection, these new nodes would be mixed with the actual nodes and complicate things. I'm also using the context menus, so I could pop up "View Actions" off the edge, but I still need a way to visually show that action exist on an edge. If anyone has ideas on how to visualize this, please let me know!

Thanks!

Upvotes: 0

Views: 962

Answers (1)

maxkfranz
maxkfranz

Reputation: 12242

HTML content can not be rendered inside a canvas. Labels are merely drawn using context.fillText().

If you want to display HTML content, you will need to put that content in your page's HTML. You could create a Cytoscape.js extension to make this easier or more concise in your code, but the organisation is completely your choice.

I would create an extension that renders HTML labels using a div on top of the Cytoscape.js canvases. You could sync the positions with viewport events. If you take this approach, you may want to co-ordinate with John Wehr, who has started an extension to do just that: https://github.com/wehriam/cytoscape-css-renderer

This discussion may also be of interest to you: https://github.com/cytoscape/cytoscape.js/issues/305

Upvotes: 0

Related Questions