How to use .d3Force method to add custom forces like in 3d-force-graph

[thisisvaze]

I'm trying to add a custom force to the graph, but somehow it works for the 3d-force-graph and when I'm trying it with 3d-force-graph-vr, I'm getting an error " .d3Force is not a function".
If it's possible to add custom forces, if yes, then how to do it. It would be of great help!

[vasturiano]

@aadityavaze thanks for reaching out. There are some pieces of functionality that are available on 3d-force-graph but not on 3d-force-graph-vr. d3Force is one of those such cases.
The main reason is because aframe (the underlying VR rendering engine) does not allow for
methods to be invoked on its components. All the communication should flow as props, and while it's possible to have the child invoke actions in the parent via callbacks, it's not possible for the parent to signal an action to the child. Further, every prop needs to be serialized into a primitive, which then is passed via the DOM to the component. Thus, serializing functions actually lose their scope during the serialization and you would not be able to share references to objects/functions, and so they would not be able to run inside the aframe component. This is the case with adding a new d3 force, it requires maintaining a reference to the force function itself which will not be available at runtime.

This is indeed unfortunate and I would very much like to find a working solution for this.

For reference, here is where the props are being serialized into the underlying aframe component:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Syntax

[vasturiano]

On second glance at the aframe docs, turns out there is a way to access the internal methods: https://aframe.io/docs/0.8.0/core/component.html#accessing-a-component%E2%80%99s-members-and-methods

This is great, I have now exposed the d3Force method using that internal access method. So, you can now use it in the same way as 3d-force-graph.

myGraph.d3Force(...)

Here's an example: https://vasturiano.github.io/3d-force-graph-vr/example/collision-detection/

Make sure to use the latest version (1.22.0).

[thisisvaze]

@vasturiano Thanks a lot for explaining it so well and going through all the trouble to making it work. It seemed like a much-needed functionality to this awesome library.

Thanks again!