Disconnected nodes stuck overlapped at origin

[ongmk]

trafficstars

Describe the bug When data has nodes that are not connected by any links, the nodes are overlapped and stuck at the origin.

Data and Config

{
  "id": "graph-id",
  "data": {
    "nodes": [
      {
        "id": "q0_node",
        "label": "node",
        "fontColor": "white",
        "opacity": 1,
        "color": "#01FF70",
        "node_id": "q0"
      },
      {
        "id": "q1_node",
        "label": "node",
        "fontColor": "white",
        "opacity": 1,
        "color": "#01FF70",
        "node_id": "q1"
      },
      {
        "id": "q2_node",
        "label": "node",
        "fontColor": "white",
        "opacity": 1,
        "color": "#01FF70",
        "node_id": "q2"
      },
      {
        "id": "q3_node",
        "label": "node",
        "fontColor": "white",
        "opacity": 1,
        "color": "#01FF70",
        "node_id": "q3"
      },
      {
        "id": "q4_node",
        "label": "node",
        "fontColor": "white",
        "opacity": 1,
        "color": "#01FF70",
        "node_id": "q4"
      },
      {
        "id": "q5_node",
        "label": "node",
        "fontColor": "white",
        "opacity": 1,
        "color": "#01FF70",
        "node_id": "q5"
      },
      {
        "id": "q6_node",
        "label": "node",
        "fontColor": "white",
        "opacity": 1,
        "color": "#01FF70",
        "node_id": "q6"
      },
      {
        "id": "q7_node",
        "label": "node",
        "fontColor": "white",
        "opacity": 1,
        "color": "#01FF70",
        "node_id": "q7"
      },
      {
        "id": "q8_node",
        "label": "node",
        "fontColor": "white",
        "opacity": 1,
        "color": "#01FF70",
        "node_id": "q8"
      },
      {
        "id": "q9_node",
        "label": "node",
        "fontColor": "white",
        "opacity": 1,
        "color": "#01FF70",
        "node_id": "q9"
      }
    ],
    "links": [],
  "config": {
    "directed": true,
    "height": 700,
    "width": 1000,
    "node": {
      "renderLabel": true,
      "labelProperty": "id",
      "color": "lightgreen",
      "size": 120,
      "opacity": 10
    },
    "link": {
      "renderLabel": false,
      "type": "CURVE_SMOOTH",
      "fontColor": "white",
      "color": "#d3d3d3",
      "highlightColor": "lightblue",
      "opacity": 0
    },
    "d3": {
      "alphaTarget": 0.05,
      "gravity": -100,
      "linkLength": 100,
      "linkStrength": 0.01
    }
  }
}

Expected behavior Nodes should be separated based on gravity config.

Screenshots

1. When first loaded
2. After dragging the nodes to middle of the screen.
3. Using onClick event to log details of the node

Environment:

• OS: windows 10
• Browser: Chrome
• Version: 88.0.4324.190
• react-d3-graph version 2.6.0
• d3 version 5.16.0
• react version 16.13.1

[oshhh]

@ongmk were you able to solve this issue?

[ongmk]

@ongmk were you able to solve this issue?

Oops I closed it because I saw that a similar issue was closed in version 2.6.0.

But after some testing I find that I still have the same issue.

[ongmk]

@oshhh I am having also having the same issue where the graph animates when I setstate. Did you find a way to fix that?

[oshhh]

@ongmk yes I was able to solve that by creating a component containing only the graph and passing the data as props to that component. I also added the function shouldComponentUpdate to ensure that it doesn't update everytime the state of the parent component is updated

class KG extends Component {
  state = {};
  shouldComponentUpdate(nextProps) {
    return nextProps.graph !== this.props.graph;
  }
  render() {
    return (
      <Graph
        id="graph-id"
        data={this.props.graph}
        config={this.props.config}
        onClickNode={(id, node) => {
          this.props.onClickNode(node);
        }}
      />
    );
  }
}

[ongmk]

That makes a lot of sense. Thank you!

[danielcaldas]

Thanks for the detail @ongmk , if possible please add a link to a repository or codesanbox environment where we can debug this issue to better understand what you're facing.

[oshhh]

@danielcaldas https://github.com/oshhh/chatbot_app/tree/react-d3-graph-debug branch: react-d3-graph-debug To run just clone it and run npm start. Go to the tab "Knowledge Graph" and you'll be able to see nodes stuck at origin.

Configuration: "d3": "^5.5.0", "react": "^17.0.1", "react-d3-graph": "^2.6.0", "react-dom": ">=17.0.0",

[binnyva]

Hey All, I'm having this issue as well. Created a Codesandbox project with the config very close to what is given in the README file of react-d3-graph project... https://codesandbox.io/s/bold-panini-xpgf4?file=/src/App.js

The unlinked nodes cluster in the top-left part of the Graph - you might need to drag the graph a bit to see them.

  "dependencies": {
    "d3": "^5.16.0",
    "react": "^16.4.1",
    "react-d3-graph": "^2.6.0",
    "react-dom": "^16.4.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.1"
  },