vasturiano
The ability to show Node Labels all the time without having to use Text Nodes
I want to be able to show Sprite text on node's all the time. I have been able to successfully do this by adding a SpriteText() object as a child to a node mesh object like this:
Current Code
Current Graph
It seems to work fine however whenever you click and drag on the Sprite Text above the node instead of the node itself it gives this error:
It seems like an issue with the "drag" and "dragend" event not properly getting the node data because its not actually dragging on the node.
Describe the solution you'd like
-
I would like some kind of native support for having node labels that work ALL THE TIME not just for hovering on the node.
-
Or have some flexibility with the Sprite Text as a child to my THREE.mesh object so I am able to drag it and the data gets passed to the event even though I am dragging the text part. If there is a workaround to get this to work let me know!
Describe alternatives you've considered
-
Now I could use the prop "nodeLabel" for the component "ForceGraph3D" but it only works on hover when I just want it to show all the time.
-
I could also use text nodes but my team really wants to have the spherical nodes with the sprite text above
-
If there is a way to show node labels all the time please let me know. I have read the docs and I cannot find a solution to this
Additional context Add any other context or screenshots about the feature request here.
@Nitsua365 thanks for reaching out.
There's a lot of variance on how different consumers may want to setup and style their labels, therefore it's most flexible if each consumer builds their own using SpriteText. However, you don't need to include your own node sphere; you can simply set nodeThreeObjectExtend={true} and the default node sphere will be kept along-side the label. This should work fine with the built-in dragging functionality too.
Hey I tried adding your extend prop and removing my node that I made. However I still could not get it to work to where it shows all of the time and still only shows on hover. I am probably making a silly mistake but wanted to know if you knew how to fix this.
I also tried leaving my sprite text with my own node in the "nodeThreeObject" prop and adding the extend prop as well and it gives me the error now when I drag the node and/or the sprite text. Again I probably mis understood some of your instructions and am wondering if you can clarify for me. Thanks!
@Nitsua365 if you want both the default node and the text, you need to have your own nodeThreeObject, but only for the text part, since the default node will be automatically included when you set nodeThreeObjectExtend to true.
If you can't get it to work the best is if you do a simple repro example on https://codesandbox.io/ so we can have a closer look as to what might be happening.
Currently trying to get this working similarly on the ForceGraph2D - is the approach similar?
@trmiller for the 2D mode (based on HTML Canvas) the mechanism is similar but you should instead use the methods nodeCanvasObject and nodeCanvasObjectMode. The way to specify your custom node style will naturally be done in Canvas syntax instead of ThreeJS WebGL objects. And if you want to keep the default node representation along side, you can choose to draw your custom extension on top (after) or behind (before) the default part.
Please refer to the docs for more info.
@Nitsua365 Your solution to display texts via SpriteText on the custom 3D mesh objects saved my day. Thanks! Also, thanks to vasturiano for developing this nice library.
