I cannot modify d3Force parameters and have them visible in a simulation.

[jjwallace]

Describe the bug
I cannot modify d3Force parameters and have them visible in a simulation.
when trying both methods below, there is no visible change in the force layout simulation.

To Reproduce
One method is in the below useEffect, another is commented out below inside the ForceGraph3d Component.

useEffect(() => {
    if (fgRef.current) {
      const fg = fgRef.current; 
      fg.d3Force('charge').distanceMax(25)
      fg.d3Force('charge').strength(-25)
      fg.d3Force('link').distance(15)
      fg.d3Force('collision', d3.forceCollide(node => 2.5*node.radius))
      fg.d3Force('x_dist', d3.forceX().strength(10))
      fg.d3Force('center', forceCenter(0)); 
      fg.d3Force('collide', d3.forceCollide(4)); 
    }
  }, [fgRef]);

  return (
    <div>
      <ForceGraph3D
        ref={fgRef}
        backgroundColor="#000003"
        linkColor={() => 'rgba(255,255,255,0.7)'}
        graphData={selectedNetwork}
        nodeLabel="ip"
        nodeAutoColorBy="type"
        onNodeClick={handleClick}
        // d3Force={{ //Seems to not work here like this, library problem
        //   charge: { enabled: true, strength: -20 }, // Increase repulsion strength
        //   collide: { enabled: true, radius: 30 }, // Increase collision radius
        //   link: { enabled: true, distance: 120 }, // Increase link distance
        //   gravity: { enabled: true, strength: -120 }, // Increase gravity strength
        //   center: { enabled: true, strength: 0.05 }, // Enable centering force
        //   x: { enabled: true, strength: 0.0 }, // Enable x-axis positioning force
        //   y: { enabled: true, strength: 0.0 }, // Enable y-axis positioning force
        //   z: { enabled: true, strength: 0.0 } // Enable z-axis positioning force
        // }}

Expected behavior
Upon modification of charge, link, collision and collide; the simulation should change its properties however there is no visible changes that occur almost as if non of these parameters affect the simulation.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu
• Browser: Brave
• Version: Unknown

[jjwallace]

This issue was solved with the below solution:

useEffect(() => {
      fgRef?.current?.d3Force('charge').distanceMax(125)
      fgRef?.current?.d3Force('charge').strength(-15)
      fgRef?.current?.d3Force('link').distance(15)
      fgRef?.current?.d3Force('collision', d3.forceCollide(node => 2.5*node.radius))
      fgRef?.current?.d3Force('center', forceCenter(0)); 
      fgRef?.current?.d3Force('collide', d3.forceCollide(1)); 
  }, []);