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

Visualization graph with nodes in the center of the container not working #407

Open ymd-44 opened 3 years ago

ymd-44 commented 3 years ago

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 !

danielcaldas commented 3 years ago

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?

ymd-44 commented 3 years ago

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 : Screenshot-react-graph-d3 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 : Screenshot-react-graph-d3-v2

danielcaldas commented 3 years ago

Can I double-check with you if the same happens when you use the d3 default configuration values.

image

ymd-44 commented 3 years ago

Can I double-check with you if the same happens when you use the d3 default configuration values.

image

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 ?

danielcaldas commented 3 years ago

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

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

shobhitjaintookitaki commented 3 years ago

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.

danielcaldas commented 3 years ago

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?)

image

ymd-44 commented 3 years ago

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?)

image

Hi @danielcaldas, Indeed, I don't understand this error in stackblitz. But if you test locally this App, there is not this error.

Tbhesswebber commented 3 years ago

Here is a minimal reproduction in codesandbox.

image

Tbhesswebber commented 3 years ago

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" }
];
ongmk commented 3 years ago

Hi I think I have the same problem as you did. #440 May I ask how you fixed the issue?

oshhh commented 3 years ago

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

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

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

danielcaldas commented 3 years ago

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:

image

oshhh commented 3 years ago

@danielcaldas the problem is present with d3@5.5.0 as well.

exit99 commented 3 years ago

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.

yoonj1n commented 1 year ago

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

yoonj1n commented 1 year ago

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

risyadzyn21 commented 1 year ago

this problem solved after deleted StrictMode, I think this is not the solution