HTML Rendering on graph nodes

[ayberkdikcinar]

In my use case, I've embedded HTML elements (such as icons for edit, remove, etc.) directly on the graph nodes. These elements have event listeners attached and function as expected.

However, I encountered an issue when zooming in or out on the graph:

• Zoom in: The HTML structure on the nodes shrinks and becomes smaller than expected.
• Zoom out: The HTML structure enlarges, appearing disproportionately larger.
  This behavior creates inconsistencies in the size of the embedded elements relative to the rest of the graph.

Context
While the underlying graph nodes and links are drawn proportionally during zoom, the scaling impacts the embedded HTML elements differently because their dimensions are tied to CSS rather than the graph's canvas.

Desired Solution
I want the size of the HTML elements to remain constant (unaffected by zoom scaling) while the graph is zoomed. The goal is to achieve a consistent appearance for the icons, regardless of the graph's zoom level.

- Has anyone encountered a similar issue?
- Are there any effective solutions or strategies to resolve it? I would be happy to discuss potential approaches to address this problem.

[vasturiano]

@ayberkdikcinar thanks for reaching out.

Are you using the 2D or 3D version of the graph? And would you be able to make a simplified example on https://codesandbox.io/ to illustrate the point?

[ayberkdikcinar]

Hey, sorry for the late response. I am using 3D version. Here is the sandbox example;

https://codesandbox.io/p/sandbox/wonderful-flower-5vm8zh

Imagine that instead of an image, we have some buttons as HTML elements, which are not significant in this case.

Here, when we zoom, the HTML elements behave opposite: they shrink when zooming in and enlarge when zooming out. If we can somehow able to manage this or even maybe discussing some ideas that I can work on, it will be perfect.

[vasturiano]

@ayberkdikcinar this is actually the expected behaviour of the CSS2DRenderer. What's happening is that the size of the content of the HTML nodes does not change according to the zoom level, they remain constant. It might appear that they're shrinking/enlarging but it's only because what's around them is changing size. Their size remains the same.

You can see the same thing happening in this example:
https://vasturiano.github.io/react-force-graph/example/html-nodes/

If what you need is a text element that scales with the camera proximity then you might be better served using a sprite, with this module for instance: https://github.com/vasturiano/three-spritetext

This example uses that: https://vasturiano.github.io/react-force-graph/example/text-nodes/index-3d.html