Toggle input features and removing nodeThreeObject

[ShobiStassen]

Hi, Thanks for all the amazing examples provided, I have using them to work on a few visualizations and have a few issues when I try to combine different features, that I cant quite seem to work out. All the glitches I mention below can be viewed on this example 1) I have a toggle for three different node views (colored by 1) group, 2)node-property and 3)an image in lieu of spherical-nodes). However, once I set the Graph.nodeThreeObject( node => .... etc) to render images instead of node-spheres, I can no longer toggle back to the other node views without completely regenerating the Graph. 2) if a new Graph object is created, then the sliders (for different features like node size scale, opacity of links etc) no longer work because they seem to only apply to the originally created Graph object. This must be because I am not defining the variables properly, I'm rather new to java script so some pointers on how to better structure the ToggleColor() or UpdateForce()/ UpdateLinkOpacity() functions and linking them to the underlying Graph variable would be appreciated 3) the only way I can vary the Force repulsion charge as a user input/slider is by regenerating the Graph entirely, but then of course all the sliders for the other visual parameters (link Opacity, NodeSizet etc) stop working. Here is the code file Thanks so much for taking the time to answer

[vasturiano]

@ShobiStassen thanks for reaching out.

I have only looked at your first item, but that appears to be because in your toggleColor you're not resetting your .nodeThreeObject when switching back from images, so the component keeps using it to render a custom node. https://github.com/ShobiStassen/shobistassen.github.io/blob/c3c07c036bad2c665ed06bf95089823e0da09035/docs/test_img.html#L200-L213

You can reset that property (in options 1 and 2) by doing Graph.nodeThreeObject(null).

[vasturiano]

For your third item, to modify the repulsion strength you shouldn't need to reinstantiate the graph, nor even to create a new force. This should be sufficient:

Graph.d3Force("charge").strength(settings.Force)

Your item 2 seems like a consequence of item 1. You shouldn't need to reinstantiate your graph object for any of these cases.

[ShobiStassen]

@vasturiano Thanks so much, your fix for 1) and 2) works perfectly. For item 3, if I use your code to modify the repulsion strength (even to -10 all the way from -300), then the impact on the overall structure is very minimal/ hardly perceptible. Whereas if i re-instantiate the graph, to say -10, then the change is quite significant.

[vasturiano]

@ShobiStassen most likely because the force engine has cooled down by that point (alpha has decreased), so the influence of forces is minimal. You can reheat the simulation at that time by doing:

Graph.d3ReheatSimulation();