Hi! I'm trying to use d3force method but have error "d3Force is not a function". Could

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

d3Force is not a function about react-force-graph HOT 2 OPEN

egorairo commented on May 27, 2024

d3Force is not a function

from react-force-graph.

Comments (2)

vasturiano commented on May 27, 2024

@egorairo you need to check whether your ref is defined before using it. It seems like in this case it is not. Specifically when you're using SSR this is quite important as refs tend to be defined only on the client side.

from react-force-graph.

samjusaitis commented on May 27, 2024

@egorairo I ran into a similar problem using Next.js and trying to dynamically import this package.

Couple things that got it working for me:

Had to ensure I was using a workaround like this one to ensure the ref was getting properly attached to the force graph.
Even with this workaround, the ref wasn't available on the first render (unsure why). So I added further logic to check for this:

'use client';

import { useEffect, useReducer, useRef, useState } from 'react';
import { forceY } from 'd3-force';
import ForceGraph2D from './ForceGraph2D';

export const Graph = props => {
    const { data } = props;

    const graphRef = useRef(null);

    const [hasInitialisedForces, setHasInitialisedForces] = useState(false);
    const [tick, incrementTick] = useReducer(v => v + 1, 0);

    useEffect(() => {
        const graph = graphRef.current;

        if (!graph || hasInitialisedForces) return;

        graph.d3Force('center', null);
        graph.d3Force('directional', forceY(100));

        setHasInitialisedForces(true);
    }, [tick, hasInitialisedForces]);

    return (
        <ForceGraph2D
            ref={graphRef}
            graphData={data}
            onEngineTick={incrementTick}
        />
    );
};

from react-force-graph.

Recommend Projects