react-d3-graph
react-d3-graph copied to clipboard
Error when attempting to drag custom nodes (TypeScript)
When using custom nodes, attempting to drag any node results in an error.

I use TypeScript in my project. Dependencies (typescript: "^4.2.3", d3: "^6.7.0", react-d3-graph: ^2.6.0, @types/d3: "^6.7.0", @types/react-d3-graph: "^2.3.5") are installed.
The same configuration without using TypeScript is working fine.
My configuration:
{
automaticRearrangeAfterDropNode: false,
collapsible: false,
directed: true,
focusAnimationDuration: 0.75,
focusZoom: 1,
freezeAllDragEvents: false,
height: 400,
highlightDegree: 1,
highlightOpacity: 1,
linkHighlightBehavior: false,
maxZoom: 8,
minZoom: 0.1,
nodeHighlightBehavior: false,
panAndZoom: false,
staticGraph: false,
staticGraphWithDragAndDrop: false,
width: 800,
d3: {
alphaTarget: 0.05,
gravity: -100,
linkLength: 100,
linkStrength: 1,
disableLinkForce: false,
},
node: {
color: 'blue',
fontColor: 'black',
fontSize: 8,
fontWeight: 'normal',
highlightColor: 'SAME',
highlightFontSize: 8,
highlightFontWeight: 'normal',
highlightStrokeColor: 'SAME',
mouseCursor: 'pointer',
opacity: 1,
renderLabel: true,
size: 200,
strokeColor: 'none',
strokeWidth: 1.5,
svg: '',
symbolType: 'circle',
},
link: {
color: 'pink',
fontColor: 'black',
fontSize: 8,
fontWeight: 'normal',
highlightColor: 'SAME',
highlightFontSize: 8,
highlightFontWeight: 'normal',
mouseCursor: 'pointer',
opacity: 1,
renderLabel: false,
semanticStrokeWidth: false,
strokeWidth: 1.5,
markerHeight: 6,
markerWidth: 6,
strokeDasharray: 0,
strokeDashoffset: 0,
strokeLinecap: 'butt',
},
};
I'm running into the same issue...
see https://github.com/danielcaldas/react-d3-graph/issues/434. It is the version of d3 that causes the issue. It can be fixed by installing an older version of d3