Open
Description
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)