An example for adding div to node for 2d graph

[M3noetius]

I saw that for the 3d-force-graph there is a way that you can add divs and therefore new components to the nodes in order to enhance the info provided for a node.

Components that track each node individually that do not take part on calculating the forces for the graph.

Ultimately, in order to give you a picture , I am thinking for adding a bubble above a node that displays more information for a node. Currently I have a custom image and a title at the bottom of the node but I want to add more info above the node.

Is there a hack I can implement ? Is there any idea (favorable a sample code ?). What code should be changed inside the library (if someone can point me to)?

Examples: https://github.com/vasturiano/3d-force-graph/blob/master/example/html-nodes/index.html https://codesandbox.io/s/pensive-lalande-vwtxj?file=/index.js:6204-6242

Thank you!

Edit: I am using the react version of the library if that adds something to the problem

[vasturiano]

@M3noetius thanks for reaching out.

This component uses Canvas for rendering (as opposite to WebGL in the 3d counterpart), and thus any node design should be using Canvas as a language for implementing the styling. However, what you describe seems very doable using Canvas specification, you shouldn't really necessarily need HTML/CSS for it.

I suppose you have seen the text node example: https://github.com/vasturiano/force-graph/blob/master/example/text-nodes/index.html

[bitnom]

d3 supports html nodes