Issue with example and v.2.6.0

Describe the bug I have an issue with link force not correctly working. After a few hours, I’ve decided to copy-pasta the data & the configuration from your example here to see if the issue was coming from my data : https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel

Here is what I’ve copied :

default.config.js :

module.exports = {
  automaticRearrangeAfterDropNode: true,
  collapsible: true,
  directed: true,
  focusAnimationDuration: 0.75,
  focusZoom: 1,
  freezeAllDragEvents: false,
  height: 400,
  highlightDegree: 2,
  highlightOpacity: 0.2,
  linkHighlightBehavior: true,
  maxZoom: 12,
  minZoom: 0.05,
  nodeHighlightBehavior: true,
  panAndZoom: false,
  staticGraph: false,
  staticGraphWithDragAndDrop: false,
  width: 800,
  d3: {
    alphaTarget: 0.05,
    gravity: -250,
    linkLength: 120,
    linkStrength: 2,
    disableLinkForce: false,
  },
  node: {
    color: "#d3d3d3",
    fontColor: "black",
    fontSize: 10,
    fontWeight: "normal",
    highlightColor: "red",
    highlightFontSize: 14,
    highlightFontWeight: "bold",
    highlightStrokeColor: "red",
    highlightStrokeWidth: 1.5,
    mouseCursor: "crosshair",
    opacity: 0.9,
    renderLabel: true,
    size: 200,
    strokeColor: "none",
    strokeWidth: 1.5,
    svg: "",
    symbolType: "circle",
  },
  link: {
    color: "lightgray",
    fontColor: "black",
    fontSize: 8,
    fontWeight: "normal",
    highlightColor: "red",
    highlightFontSize: 8,
    highlightFontWeight: "normal",
    labelProperty: "label",
    mouseCursor: "pointer",
    opacity: 1,
    renderLabel: false,
    semanticStrokeWidth: true,
    strokeWidth: 3,
    markerHeight: 6,
    markerWidth: 6,
    strokeDasharray: 0,
    strokeDashoffset: 0,
    strokeLinecap: "butt",
  },
};

const config = require("default.config.js");
const data = {
    nodes: [
      {
        id: "Marvel",
        svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/marvel.png",
        size: 500,
      },
      ...
   }, links: [
      {
        source: "Marvel",
        target: "Heroes",
      },
      {
        source: "Marvel",
        target: "Villains",
      },
    ....
    },
   ]
};
...

return <div>
....
<Graph
        id="graph-id"
        ref={graphRef}
        data={data}
        config={config}
      />
</div>

With the exact same parameters as in the example, I’ve noticed all the nodes were displayed at the exact same spot.

Then, I commented the property disableLinkForce: false,

And all the nodes started to appear in circle, which isn’t what i want (not same as in example provided in the link above).

Any clues what’s happening ?

Expected behavior Having the same result with grouped nodes, and gravity propertly working.

Environment:

• OS: Windows
• Browser Chrome
• Version 89.0.4389.90
• Node version 14.8.0
• react-d3-graph version 2.6.0
• d3 version 5.14.2
• react version 16.11.0

Thanks for your future help !

[oshhh]

@danielcaldas @antoninklopp any progress on this issue?

[ArnaudRib]

@antoninklopp @danielcaldas By the way, there also seems to be an issue with the useState and graph rendering.

In the sandbox, add

  const [test, setTest] = useState();
  useEffect(() => {
    setTest("hello world");
  }, []);

right below function App() {

And the graph will be completely messed up…

Sandbox forked with the issue : https://codesandbox.io/s/react-d3-graph-demo-forked-sf17b?file=/index.js:240-257