Comments (5)
So, I found the issue was being caused not by this application but by React. I was saving nodes into local storage then trying to pull them back out and reference them. I'm guessing because React keeps track of keys for the virtual DOM, by bringing them back out with now conflicting references I was getting this weird behavior.
I used Object.assign({}, node) to solve my issue after pulling the data back out of local storage. All good!
from react-force-graph.
@GeoffGodwin Your suggestion worked for me using the Object.assign({}, data)
. Whenever the data (nodes and links) change, I use setState
to update my data, and referenced this.state.data
the graph. Thanks!
this.setState(
{
cooldownTicks: 1500,
data: Object.assign({}, data),
},
() => {
setTimeout(() => {
this.setState({
cooldownTicks: 0,
});
}, 1500);
}
);
from react-force-graph.
Is this still an issue? I can't reproduce this as my state changes the graphData and it reflects in each render just fine. Can you post your onHover and onClick code as a example?
from react-force-graph.
So new finding on this front. If I take the entire graphData object and replace it in state, the graph no longer has accurate hovering logic. Hovering over nodes causes the onLinkHover code to fire and links to highlight instead of the nodes. Nodes become unclickable and unhoverable.
from react-force-graph.
I think I have encountered the same problem when using the ForceGraph2D with React and Redux. I am not sure it is an issue with React. Inside the Redux Store I can see the graph data has been updated:
Orginal:
{
"nodes" : [ {
"id" : 756,
"type" : "name",
"xconst" : "nm0000199",
"name" : "Al Pacino"
},
...
],
"links" : [ {
"source" : 755,
"target" : 756,
"type" : "actor"
},
...
]
}
Modified:
{
"nodes": [
{
"id": 756,
"type": "name",
"xconst": "nm0000199",
"name": "Al Pacino",
"__indexColor": "#ec0001",
"index": 0,
"x": -11.978053627029244,
"y": 10.996428026516487,
"vx": -3.861316660588826,
"vy": 1.1660054263690713
},
...
],
"links": [
{
"source": {
"id": 755,
"type": "title",
"xconst": "tt0099674",
"name": "The Godfather: Part III",
"__indexColor": "#d80002",
"index": 1,
"x": -13.541899642507312,
"y": -34.95916334181548,
"vx": -0.49469138005269053,
"vy": -5.479749075717602
},
"target": {
"id": 756,
"type": "name",
"xconst": "nm0000199",
"name": "Al Pacino",
"__indexColor": "#ec0001",
"index": 0,
"x": -11.978053627029244,
"y": 10.996428026516487,
"vx": -3.861316660588826,
"vy": 1.1660054263690713
},
"type": "actor",
"__indexColor": "#480096",
"index": 0,
"__controlPoints": null
},
...
]
}
When I try and resuse the modified data the nodes and links are drawn correctly but the hover and clicks no longer work.
Adding the shallow copy (Object.assign) did not resolve my issue. I added a deep copy (in the Container) before passing the data from the store to the graph. This leaves the store version untouched and in a state that it can be reused.
from react-force-graph.
Related Issues (20)
- how to prevent endless re-rendering? HOT 1
- How to draw curved lines between nodes HOT 2
- Any ideas how to implement curved connections as on screenshoot HOT 2
- appending nodes gives: Cannot create property 'vx' on string
- Performance issue when utilizing Parcel to build project.
- How to have coordinates of real positions of nodes according to the window when zoom in on hover HOT 2
- how to stop force directed graph from moving the nodes?
- how to get a graph with less spacing? HOT 3
- How can i add minimap for graph? HOT 1
- Uncaught TypeError: object null is not iterable HOT 1
- when add style zoom to root dom,node cannot trigger click and hover events
- The 3d graph suddenly hops or flickers at regular intervals HOT 2
- Is there an example of displaying a label on a link in ForceGraph2D? HOT 1
- Can't remove force with TypeScript interface for d3Force HOT 1
- I cannot modify d3Force parameters and have them visible in a simulation. HOT 1
- Graph reloading when hovering the menu HOT 7
- Search for node by node.id then can focus camera on that node
- Lasso tool for 2d node/edge selection
- a bug
- Vector Embeddings --> UMAP projections of nodes for organizing within 2 or 3-D space. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-force-graph.