Comments (3)
The reason the simulation does not update is that the alpha value is not being refreshed.
Currently the simulation only ticks as long as simulation.alpha > simulation.alphaMin
. While ticking this value is decaying which means that after the first run the simulation will never run again until a new alpha value is set.
The simplest way for now is to pass alpha
in simulationsOptions
. This will result in an actual restart of the simulation. But in my opinion runSimulation()
in the provided utils.updateSimulation()
should also reset the alpha value.
from react-vis-force.
I came here to ask the exact same question as @xiaosansiji . I've got the below code example that deletes a node on click, changing the graph like when @xiaosansiji adds a node. On click the node is deleted but all the remaining nodes bunch up in the top left corner.
class App extends Component {
constructor(props) {
super(props);
var links = [
{"source": "first-node", "target": "second-node"},
{"source": "third-node", "target": "second-node"},
]
var tasks = [
{"id": "first-node", "fill": "red"},
{"id": "second-node", "fill": "blue"},
{"id": "third-node", "fill": "blue"},
]
this.state = {
tasks: tasks,
links: links
}
}
render() {
function md(r, task) {
this.setState((prevState) => ({
tasks: prevState.tasks.filter((t) => t !== task),
links: prevState.links.filter((l) => l.source !== task.id && l.target !== task.id)
}));
}
var md = md.bind(this)
var tasks = this.state.tasks.map((task) => {
return (<ForceGraphNode key={task.id} node={{ id: task.id }} fill={task.fill} onMouseDown={(r) => md(r, task)} />)
});
var links = this.state.links.map((link) => {
return (<ForceGraphLink key={link.source + '..' + link.target} link={link} />)
});
return (<ForceGraph simulationOptions={{ height: 300, width: 300 }}>
{tasks}
{links}
</ForceGraph>)
}
}
from react-vis-force.
super ghetto workaround with a dependency on lodash.isEqual
:
class FG extends ForceGraph {
componentDidUpdate(prevProps, prevState) {
var prevNodes = prevProps.children[0].map((c) => c.key);
var prevLinks = prevProps.children[1].map((c) => c.key);
var nodes = this.props.children[0].map((c) => c.key);
var links = this.props.children[1].map((c) => c.key);
if (!(isEqual(prevNodes, nodes) && isEqual(prevLinks, links))) {
console.log("diff!")
this.simulation.alpha(1).restart();
}
}
}
the restart
however results in my componentDidUpdate
being called repeatedly for about 5 seconds so there must be something in the restart
that's kicking the react update machinery, this isn't an ideal solution.
from react-vis-force.
Related Issues (20)
- what props to use for zoom and drag? HOT 1
- Cannot find module './factoryWithTypeCheckers' from node_modules/react-vis-force/dist HOT 1
- Documentation for Links HOT 11
- graph position wrong after data prop change HOT 8
- Make a graph with circles bigger than radius:5 HOT 2
- Set scale HOT 1
- centering not happening when using .map to create multiple nodes and links HOT 9
- Labels over nodes break hover HOT 1
- Unable to add variable distances HOT 3
- Usage of babel-preset-react-app prevents building for certain NODE_ENVs
- I need help
- Adding text to each node and make them visible
- can we Draggable Nodes by this plugin?
- Add Labels to Links
- Render same color of nodes in a group ? HOT 1
- labelOffset
- Animate: true causes state update even after component is unmounted
- Add zoomable HOT 1
- Center simulation on update
- Node sizes 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-vis-force.