react-d3-graph
react-d3-graph copied to clipboard
danielcaldas
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 !
Hey, @ymd-44, sorry to hear you are facing trouble. Thanks for the detail, but this issue requires a bit more visual information. Do you have a repo/code sandbox you can share with us? Do you have any GIF/video that would demonstrate exactly what you're facing?
Hey, @ymd-44, sorry to hear you are facing trouble. Thanks for the detail, but this issue requires a bit more visual information. Do you have a repo/code sandbox you can share with us? Do you have any GIF/video that would demonstrate exactly what you're facing?
Hi @danielcaldas , Thank you for your answer.
This screenshots shows this issue :
When I refresh my tabs, we can see in this screenshot the first problem: the graph is not in the center of the container.
In this screenshot, the drag & drop is ok but the nodes are compacted :
Can I double-check with you if the same happens when you use the d3 default configuration values.
Hi, @danielcaldas, Thank you for your help and support. I used the d3 default configuration values in my project and the result is the same.
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.05,
gravity: -100,
linkLength: 100,
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,
},
};
NB: my react component use GoldenLayoutComponent, I don't know if there could be impact the visualization graph ?
@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?
@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.
Hi @danielcaldas I am also facing the exact same issue. Could this be due to conflicting dependencies? I have tried this in the new Project but couldn't replicate it there, but in my existing old project D3 gravity is not working.
This needs further investigation. I could not debug in stackblitz linked provided as I'm faced with a runtime error that I honestly don't know where it comes from, also never seen it before (maybe some d3 mismatch of dependencies on stackblitz?)
This needs further investigation. I could not debug in stackblitz linked provided as I'm faced with a runtime error that I honestly don't know where it comes from, also never seen it before (maybe some d3 mismatch of dependencies on stackblitz?)
Hi @danielcaldas, Indeed, I don't understand this error in stackblitz. But if you test locally this App, there is not this error.
After a bit of playing around with my reproduction, it looks like the nodes only get centered if they have a link. I am able to get them to automatically be in view with the following:
// const links = [];
const links = [
{ source: "3", target: "3" },
{ source: "2", target: "2" },
{ source: "1", target: "1" }
];
Hi I think I have the same problem as you did. #440 May I ask how you fixed the issue?
@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 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==
@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.
Just now realized the original bug report mentions d3 version v4. You need to use version 5 of d3 to be compliant with react-d3-graph peer dependencies version. From the README.md:
I have similar issues. I copied the simple example in the readme and got the result of no gravity and everything stuck at x:0 y:0 (but they are draggable). Then I tried a new project with create-react-app, installed the dependencies, and copied the example and everything worked fine. It seems to have to do with actually being in another react app.
I switched over to using react-cytoscape, and interestingly had the same issue of all the nodes accumulating in the same position. The solution there, was to trigger a redraw of the layout to cytoscape after rendering the size of the base component. as per this issue: https://github.com/plotly/react-cytoscapejs/issues/46
I'm unsure the underlying reason, but it has something to do with being in a larger project and the state management there in. Which makes me wonder if there is something similar happening here.
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, 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
this problem solved after deleted StrictMode, I think this is not the solution
