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 !

[yoonj1n]

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

[schultz9999]

@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.