Extend bokeh circulare graph by curvy edges and arrowheads

Community Support
1

Dear community,

I am new to Bokeh. My goal is to build a circular graph where you can click on the nodes to show incoming and outgoing links to other nodes. The edges shall be curvy so there are no overlapings if there are two links with different directions between to nodes. Plus, the edges shall have arrowheads.

I have three problems: (first one very crucial)

  1. I have successfully created the graph but when you click on any node you will notice that bokeh also selects links that are not related to the selected node or it highlights a different node when you click on a specific one.
  2. How do I add arrowheads to the the edge_renderer?
  3. When I add Arrowheads by annotations function, bokeh just paste it over the curved edges and they are not interactive (e.g., not clickable) (see ‘My code with Annotation Arrows’)

You can see here my code and the result as a html file in my github repository: https://github.com/shassanin/test_bokeh

My code so far: bokeh.py

My code with Annotation Arrows: bokeh - arrowheads.py

here you can find the results: (screenshots/JPG):
‘My code so far’: → new_networkx.JPG
‘My code with Annotation Arrows’: → new_networkx_arrows_error.JPG
(html not uploaded because of privacy)

Thank you very much in advance for every help and feedback! Have a nice day!

2

Hi @botony I would say that currently directed graphs are not well-supported in Bokeh. There is no arrow glyph, only an arrow annotation. Annotations, by design and definition, do not participate in hit-testing (i.e. they are not clickable). Additionally as you have noted, combining just the ArrowHead annotation with regular line glyphs is probably not going to produce great results.

Ideally, we could make it so that existing lines and multilines could be configured to add arrowheads at their ends (oriented automatically, and draw them well positioned), but that will require future development. At present you may be better off looking at other tools for this particular use-case.