vasturiano / react-force-graph

React component for 2D, 3D, VR and AR force directed graphs
https://vasturiano.github.io/react-force-graph/example/large-graph/
MIT License
2.23k stars 284 forks source link

Can't remove force with TypeScript interface for d3Force #516

Closed julianZeitler closed 5 months ago

julianZeitler commented 5 months ago

I want to remove the centering force like shown below using TypeScript:

function Component({}) {
  const fgRef = useRef<ForceGraphMethods>();

  useEffect(() => {
    if (fgRef.current) {
      const fg = fgRef.current;
      fg.d3Force("center", null);
    }
  }, [])

  return (
    <div>
      <ForceGraph2D ref={fgRef} graphData={exampleData} width={size?.width} height={size?.height}/>
    </div>
  );
};

The interface exposed for the d3Force method does not allow the second argument to be null. Interface exposed in src/packages/react-force-graph-2d/index.d.ts (lines 136-138):

// Force engine (d3-force) configuration
d3Force(forceName: 'link' | 'charge' | 'center' | string): ForceFn<NodeObject<NodeType>> | undefined;
d3Force(forceName: 'link' | 'charge' | 'center' | string, forceFn: ForceFn<NodeObject<NodeType>>): ForceGraphKapsuleInstance;

Thank you very much!

vasturiano commented 5 months ago

Thanks for flagging this @julianZeitler. 👍

Indeed the types weren't allowing for the null value to be used. This is now fixed in the latest version, so you should be able to proceed.