search

danielcaldas / react-d3-graph

Interactive and configurable graphs with react and d3 effortlessly
https://danielcaldas.github.io/react-d3-graph/sandbox/
MIT License
819 stars 233 forks source link

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

Open akshgpt25 opened 4 years ago

akshgpt25 commented 4 years ago

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 commented 4 years ago

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 ?

Screenshot 2020-06-16 at 11 06 26
danielcaldas commented 4 years ago

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] commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

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