Issue with example and v.2.6.0

[ArnaudRib]

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]

@ArnaudRib facing the same issue in #447

[antoninklopp]

Hello @oshhh and @ArnaudRib ,

I have created a repro sandbox, so that we can iterate to find the bug or the expected behavior. You can find the sandbox here

The behavior I am seing is pretty normal :

• If disableLinkForce == true, then there is no simulation and since you don't give any information about the position, the nodes are all positioned at x = 0, y = 0.
• If disableLinkForce == false, it seems that everything is working as expected.

I can reproduce the strange behavior inside the sandbox, but can't reproduce it for now in a separate codesandbox, I don't know why it is creating this weird graph.

[frejonb]

@antoninklopp I deleted node_modules and yarn.lock and installed the exact dependencies of the sandbox, but still getting all nodes collapsed. Is there any way to further debug it?

[antoninklopp]

Hi @frejonb ,

The Pull Request is still open and there is no new version of the package, so you can not get the fix from npm for now.

[frejonb]

Sorry I missed that. I’ll try the PR thanks! 🙏

[frejonb]

Still not working for me

{
  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, // Replace with false to see the graph work
  },
  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",
  },
}

[antoninklopp]

Can you also paste your data config? Thanks !

[ArnaudRib]

@antoninklopp in your demo sandbox, I have tried to put staticGraphWithDragAndDrop to "true", and it completely breaks the graph.

I would need a static graph, with node positions being repelled with gravity at the initialization.

I have tried to play with : staticGraphWithDragAndDrop and disableLinkForce but I'm afraid it is still not working.

Expected init when static :

But what I get :

Any idea how I could achieve that?

NB : in my application, when staticGraphWithDragAndDrop is true, putting gravity 0 or gravity -10000 does not change anything.. The result is the same. I'm using the same d3 and same d3-react-graph as in your sandbox.

[ArnaudRib]

@frejonb make sure your nodes positions (x, y) in data are initialized to undefined and not null maybe? I had them initialized at null, and they were all gathered as well...

[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

[oshhh]

@danielcaldas @antoninklopp any progress on this issue?

[qkdrk777777]

I received the data through the API, but there seems to be a delay in the process of getting it, and it seems to be set in the meantime. I modified the graph to be drawn only when data.nodes.length > 0, and confirmed that the graph changed as shown in the example.

Before

After