danielcaldas / react-d3-graph

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

Error when attempting to drag custom nodes (TypeScript) #470

Open rejth opened 3 years ago

rejth commented 3 years ago

When using custom nodes, attempting to drag any node results in an error.

image

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',
    },
 };
jadenmazzone commented 3 years ago

I'm running into the same issue...

jadenmazzone commented 3 years ago

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