error on mouse events

[Pauatro]

Describe the bug I'm getting an error on click and mousewheel events so I can't zoom in or out and I can't drag the nodes... can't figure out why.

To Reproduce Steps to reproduce the behavior: Right after rendering, I just try to drag or zoom in.

Expected behavior Being able to zoom and drag&drop I guess.

Environment: OS: Ubuntu Browser: Chrome react-d3-graph version: 2.41 (to avoid error in issue #351, but also happens in 2.5 and 2.3) react version: 16.14 d3 version: 5.16

Component code:

export const TopologyGraph = ()=>{

    const [shouldRender, setShouldRender] = useState(false);

    useEffect(() => {
        const timeout = setTimeout(() => setShouldRender(true), 1000);

        return () => clearTimeout(timeout);
    }, []); /// This was to avoid all elements collapsing into one corner as described in an issue that I can't find now
 
    return (
        <>
            {
                shouldRender && 
                <TopologyGraphContainer>
                    <Graph
                        id="id" 
                        data={Payload}
                        config={Config}   
                    />
                </TopologyGraphContainer>
            }
        </>
    )
} ; 

Payload:

{
    nodes: [
        { 
            id: "Harry" 
        }, 
        { 
            id: "Sally" 
        }, 
        { 
            id: "Alice" 
        },
        { 
            id: "Jhon" 
        },
        { 
            id: "Will" 
        },
        { 
            id: "Lucy" 
        },
        { 
            id: "Sarah" 
        },
    ],
    links: [
        { 
            source: "Harry", 
            target: "Sally" 
        },
        { 
            source: "Harry", 
            target: "Alice" 
        },
        { 
            source: "Lucy", 
            target: "Alice" 
        },
        { 
            source: "Lucy", 
            target: "Will" 
        },
        { 
            source: "Harry", 
            target: "Will" 
        },
        { 
            source: "Sarah", 
            target: "Will" 
        },
        { 
            source: "Sarah", 
            target: "Jhon" 
        },
    ],
};

Config:

{
    
};

(it also happens with basic configs taken from the examples of the library)

[Pauatro]

Forgot to say, thanks for the work and the effort on the library :)

[Pauatro]

I tried to run it in an empty react app and the error does not happen. It still does, however, when I use it in my app and still have no clue why... it seems to receive the events as undefined, but the events do fire.

[terahn]

I tried to run it in an empty react app and the error does not happen

Is this new React app using the same versions of react-d3-graph and d3?

The error seems to be coming from within the d3 libraries. The first thing I might suggest is to reinstall d3 in your main repo and see if that solves the problem. If that isn't helping then I can take a deeper look into it.

[mritunjaymusale]

Have you tried using the exact same version of d3 from the npm page ? npm install d3@^5.5.0 because I installed using yarn and it ended up installing the latest version which seemed to have caused the same problem for me, but then using exact version name from npm fixed it for me