Graph not visible at the center. Have to drag the entire graph

[akshgpt25]

Hi,

I am new to D3 and react. Trying to load my first graph. My graph contains around 15 nodes and 100 edges between them. I am facing 2 problems.

1. When my page loads, my graph is not coming to the center. Have to minimize the graph and then drag the graph into center.
2. Nodes that don't have any relation are coming at the top left corner. Can I also bring it to the center?

Below is the code I am trying to run <Graph id="graph-id" // id is mandatory, if no id is defined rd3g will throw an error data={data} config={myConfig} onClickNode={onClickNode} onDoubleClickNode={onDoubleClickNode} onRightClickNode={onRightClickNode} onClickLink={onClickLink} onMouseOverNode={onMouseOverNode} />

Configuration const myConfig = { "automaticRearrangeAfterDropNode": false, "collapsible": false, "directed": true, "focusAnimationDuration": 0.75, "focusZoom": 1, "height": 400, "highlightDegree": 1, "highlightOpacity": 1, "linkHighlightBehavior": false, "maxZoom": 8, "minZoom": 0.1, "nodeHighlightBehavior": false, "panAndZoom": false, "staticGraph": false, "staticGraphWithDragAndDrop": false, "width": 800, "d3": { "alphaTarget": 0.05, "gravity": -100, "linkLength": 100, "linkStrength": 1, "disableLinkForce": false }, "node": { "color": "#d3d3d3", "fontColor": "black", "fontSize": 8, "fontWeight": "normal", "highlightColor": "SAME", "highlightFontSize": 8, "highlightFontWeight": "normal", "highlightStrokeColor": "SAME", "highlightStrokeWidth": "SAME", "labelProperty": "label", "mouseCursor": "pointer", "opacity": 1, "renderLabel": true, "size": 200, "strokeColor": "none", "strokeWidth": 1.5, "svg": "", "symbolType": "circle" }, "link": { "color": "#d3d3d3", "fontColor": "black", "fontSize": 8, "fontWeight": "normal", "highlightColor": "SAME", "highlightFontSize": 8, "highlightFontWeight": "normal", "labelProperty": "id", "mouseCursor": "pointer", "opacity": 1, "renderLabel": true, "semanticStrokeWidth": false, "strokeWidth": 1.5, "markerHeight": 6, "markerWidth": 6 } }

[morenonaitana]

Same issue for me.

What I've noticed is that when my page loads the graph is centered if I use the parameter "focusedNodeId". But when I start to drag, the graph goes away, and the reason is that the container "graph-id-graph-container-zoomable" has a css property "translate" set, and when dragging for the first time it resets the translate. Maybe the default translate value is wrong ?

[danielcaldas]

May I ask for the following:

1. The behavior you describe seems a runtime error. Do you have any errors in the console?
2. A link to a repository/codesandbox with the code, or at least the data with nodes/links that you are feeding to the graph.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[alete89]

Having the same issue. @danielcaldas Yes, there are errors in the console, there is one error for each node drawn, and it looks like this: Error: <path> attribute d: Expected number, "MNaN,NaNA0,0 0 0,…". Not sure if it's related.

[danielcaldas]

Hey @alete89 could you verify whether that error is fixed here: https://github.com/danielcaldas/react-d3-graph/issues/351