Custom node hitbox shapes (not just modifying the nodeVal radius)

[thel3l]

Is your feature request related to a problem? Please describe. I was wondering if there was any way to change the hitbox that is used to decide if a mouseClick event selects the canvas or the node by varying the shape of the node hitbox? I see from issue #119, that this was a limitation based on how the selection is handled, but are there any workarounds? I currently have wide rectangles with varying lengths, which makes it difficult to click on the nodes and have the event register properly.

Describe the solution you'd like Any alternative to change the shape of the invisible circle that is drawn .. perhaps to an ellipse?

Thanks again for the great work you've done with this library and the extensive examples—it really made incorporating it a breeze :)

[trentwatt]

Did you ever figure anything out? Seems like there could be a workaround involving multiple 'nodes' per node.

There is a way in d3-force to specify forces with an accessor: maybe it is possible in such a way to have multiple 'nodes' bound together rigidly in a line by their own link forces, have their click events all be handled in the same way, and interact with the other nodes as one.

Did you venture down this path at all?

[vasturiano]

This is now possible to do, using the prop available in the newest version: nodePointerAreaPaint.

Essentially you paint the area to be used as interaction trap using a unique node color, onto the shadow canvas. Therefore you can completely customize the shape of what that interaction area should be. It doesn't even need to match the shape of the object, it can be something different, like an encompassing area or so.

You can see a working example here. And see here for the example source code.

[trentwatt]

Awesome, thank you for making such a fantastic tool!

[aleksbobic]

Hey @vasturiano do you have any suggestions how to handle this in 3D? I tried rendering THREEJS point objects in order to improve performance on large graphs, however the "onNodeHover" event is triggered only if I hover over the center of the node even though I explicitly made some points larger/smaller. Is there a way to increase the cursor hit area for points in 3D? Thanks in advance! :)

[vasturiano]

@aleksabobic in 3D you shouldn't need to do any special handling for this, because the pointer detection mechanism works differently. You can verify that here for some custom node shapes, you'll see the hovering is triggered only when directly overlapping with the object: https://vasturiano.github.io/3d-force-graph/example/custom-node-geometry/ Only the nodeThreeObject property is set: https://github.com/vasturiano/3d-force-graph/blob/de42f99abb4c36d7714090eb5d66f1a7c7af1293/example/custom-node-geometry/index.html#L28-L43

If you're seeing a different behaviour, could you make a simple reproducing example on https://codesandbox.io/ ?

[aleksbobic]

@vasturiano Thanks for your prompt reply. Yeah I'm aware of that and I already looked at that example. However, I was looking into using a single point (https://threejs.org/docs/index.html?q=point#api/en/objects/Points) to display a node in order to avoid rendering entire geometries for each node with larger graphs (I'm also adding labels and custom outlines to my nodes so if I have 3000 nodes I essentially have 9000 objects in my graph).

I'm looking into ways how to optimise this and currently the only two options I found were to use custom shaders for the outline and to use a single point for each node. I might be asking a really stupid question but would it be somehow possible to have a larger hitbox around a single point?

If it's not clear from my description I can also create a codesandbox.

[vasturiano]

Could you perhaps include an invisible sphere in your node objects (using a Group). That will create an invisible trap for pointer events around your central point.

If performance is a concern you can also try to reduce the sphere's segments resolution.

[aleksbobic]

Hi @vasturiano sorry I couldn't get back to you sooner. Hmm that sounds like a good idea. I'll test it out it should probably make the experience much better for the user. Thank you!