react-d3-graph: Visualization graph with nodes in the center of the container not working

Hi, I use react-d3-graph in my react project. It’s a great and interesting network framework for interactive and configurable graphs with react and d3.

Thank you for making this open-source project.

But I have a bug with this project :

Bug Description

I have used the similar sample which is mentioned here:
https://danielcaldas.github.io/react-d3-graph/sandbox/index.html

The graph loads perfectly fine, but I can not see the graph with nodes in the center of the container and the nodes are compacted, the d3 configuration (d3.gravity, d3.linkLength) not working correctly. I think it’s the same issue as #146 but it’s not resolved .

Following are the current package version:

 "devDependencies": {      
        "react": "^16.8.0",
        "react-dom": "^16.8.0",
}
"dependencies": {
    "d3": "^4.10.2",
    "d3-drag": "^1.2.5",
    "d3-force": "^2.0.1",
    "d3-zoom": "^1.8.3",
    "react-d3-graph": "^2.4.1",
    "react-d3-library": "^1.1.8"
}

My react-d3-graph configuration

const myConfig = {
    automaticRearrangeAfterDropNode: true,
    collapsible: false,
    directed: true,
    focusAnimationDuration: 0.75,
    focusZoom: 1,
    height: "100%",
    highlightDegree: 2,
    highlightOpacity: 0.6,
    linkHighlightBehavior: false,
    maxZoom: 10,
    minZoom: 0.1,
    nodeHighlightBehavior: true,
    panAndZoom: false,
    staticGraph: false,
    staticGraphWithDragAndDrop: false,
    width: "100%",
    d3: {
        alphaTarget: 0.5,
        gravity: -150,
        linkLength: 80,
        linkStrength: 1,
        disableLinkForce: false
    },
    node: {
        color: "#52C98B",
        fontColor: "black",
        fontSize: 10,
        fontWeight: "normal",
        highlightColor: "red",
        highlightFontSize: 14,
        highlightFontWeight: "bold",
        highlightStrokeColor: "#404080",
        highlightStrokeWidth: 1.5,
        labelProperty: "name",
        labelPosition: "right",
        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: "lightblue",
        highlightFontWeight: "normal",
        highlightFontSize: 8,
        labelProperty: "type",
        opacity: 1,
        renderLabel: true,
        semanticStrokeWidth: true,
        strokeWidth: 3,
        markerWidth: 6,
        markerHeight: 6,
    },
};

Please help !

About this issue

Original URL
State: open
Created 4 years ago
Comments: 21 (5 by maintainers)

Most upvoted comments

guys, did you solved this problem? i have same problem in my project, but i solved that. in my data (.json), they composed of links -> nodes

like this

{ "links":[ { "source":"A", "source":"B" }, { "source":"C", "source":"D" } ], "nodes":[ { "id":"A", }, { "id":"B", }, ...etc ] }

but i changed the order of links and nodes like this

{ "nodes":[ { "id":"A", }, { "id":"B", }, ...etc ], "links":[ { "source":"A", "source":"B" }, { "source":"C", "source":"D" } ] }

finally i was solve this problem i dont know if it’s a perfact solution, but i wish you guys solved that. thanks

guys again me, it’s not solution !!! i changed many things, it just one of change things… i add some code

useEffect(()=>{}) // it just reload my page i add this code to test something, but it solve that problem i wish that work to you guys

yoonj1n on Nov 6, 2022

@oshhh I also see unlinked nodes cramped together in top left corner. Trying to figure out how to push them out… There is no force to do that without links so not sure if my only option is a static graph.

schultz9999 on Mar 13, 2021

@oshhh I think after I downgraded to 2.6.0, the problem went away. Not a solution but at least dragging works.

react-d3-graph@^2.6.0:
  version "2.6.0"
  resolved "https://registry.yarnpkg.com/react-d3-graph/-/react-d3-graph-2.6.0.tgz#b994131e430b568e086970560ba8a26809113173"
  integrity sha512-U72didZuPuYEqAi1n2bJvnph+9MviIw2x9I0eoxb1IKk3cyEwsJV96n3RL72z/7HDsa1FOvDKuOJE7ujSNZB/Q==

schultz9999 on Mar 13, 2021

@danielcaldas @ymd-44 were you able to resolve the error? All unlinked nodes appear at the corner. Also I am not being able to use the drag feature. I am getting the same error on dragging:

Uncaught TypeError: Cannot read property 'ctrlKey' of null
    at HTMLDivElement.defaultFilter (zoom.js:13)
    at HTMLDivElement.mousedowned (zoom.js:251)
    at HTMLDivElement.<anonymous> (on.js:3)

oshhh on Mar 11, 2021

@ymd-44 Could you link a reference to this mentioned GoldenLayoutComponent? Where can I find the source or an example to understand if there could be some impact on the Graph visualization?

Hi @danielcaldas,

I reproduced this graph whitout the GoldenLayoutComponent in a react App and the result is the same : The graph is not in the center of the container and the nodes are compacted.

I shared my github repo: https://github.com/ymd-44/react-graph-d3_demo The example of my problem : https://stackblitz.com/github/ymd-44/react-graph-d3_demo

Thank you for your help.

ymd-44 on Feb 5, 2021