search

danielcaldas / react-d3-graph

Interactive and configurable graphs with react and d3 effortlessly
https://danielcaldas.github.io/react-d3-graph/sandbox/
MIT License
819 stars 233 forks source link

Console error while dragging and zooming the graph #537

Open himanshu-1034 opened 2 years ago

himanshu-1034 commented 2 years ago

I am facing issue with dragging and zooming a basic graph. my package.json contains d3@5.5 react-d3-graph@2.6 d3-selection@3.0.0 react@16.13 The error is `

Uncaught TypeError: Cannot read properties of null (reading 'ctrlKey') at SVGGElement.defaultFilter (drag.js:10:11) at SVGGElement.mousedowned (drag.js:51:1) at SVGGElement.<anonymous> (on.js:3:1)
  | defaultFilter | @ | drag.js:10 -- | -- | -- | --   | mousedowned | @ | drag.js:51   | (anonymous) | @ | on.js:3

Uncaught TypeError: Cannot read properties of null (reading 'ctrlKey') at HTMLDivElement.defaultFilter (zoom.js:13:11) at HTMLDivElement.mousedowned (zoom.js:251:1) at HTMLDivElement. (on.js:3:1) defaultFilter @ zoom.js:13 mousedowned @ zoom.js:251 (anonymous) @ on.js:3 `

Please help me to resolve this..

michaelbdavid commented 2 years ago

I'm seeing the same error. Graph shows up but can not pan or zoom.

"d3": "^7.3.0", "d3-context-menu": "^2.1.0", "d3-drag": "^1.2.5", "d3-force": "^2.0.1", "d3-shape": "^1.3.7", "d3-zoom": "^1.8.3", "react-d3-graph": "^2.6.0",

stevenJonathanB commented 10 months ago

The D3 version must be lower than 6 because event global was discontinued in higher versions of D3 it causes errors when zooming and dragging any node or link. Make sure you also change d3-zoom and D3-drag to lower versions. The following worked for me:

"d3": "^5.1.6", "d3-context-menu": "^2.1.0", "d3-drag": "^1.2.5", "d3-force": "^2.0.1", "d3-shape": "^1.3.7", "d3-zoom": "^1.8.3", "react-d3-graph": "^2.6.0",