uber / react-vis-force Goto Github PK
View Code? Open in Web Editor NEWd3-force graphs as React Components.
Home Page: http://uber.github.io/react-vis-force
License: Other
d3-force graphs as React Components.
Home Page: http://uber.github.io/react-vis-force
License: Other
Hi @fastfrwrd,
I am using the most basic version of the forced graph:
<ForceGraph simulationOptions={{ height: 800, width: 800 }}>
<ForceGraphNode node={{ id: 'first-node' }} fill="red" />
<ForceGraphNode node={{ id: 'second-node' }} fill="blue"/>
<ForceGraphNode node={{ id: 'third-node' }} fill="blue" />
<ForceGraphLink link={{ source: 'first-node', target: 'second-node' }} />
<ForceGraphLink link={{ source: 'first-node', target: 'third-node' }} />
</ForceGraph>
I am also referring to the react story book here: https://uber.github.io/react-vis-force/?selectedKind=%3CForceGraph%20%2F%3E&selectedStory=Characters%20from%20Les%20Mis%20%28zoomable%29&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel
I want to achieve the zoom and drag functionality but I am unable to find the proper documentation on which props need to be set and how.
Any help would be much appreciated.
Thanks in advance.
I have the flag on an InteractiveForceGraph
component but only the node hovered on will highlight and not adjacent nodes. I've been looking at the story example and source code but can't figure it out. Could you please provide context on this or perhaps a resource with good info on it? Thanks.
PS - In general, I think the docs need to be a lot more clear. It's very difficult to figure out what various props are for and what is available. I would like to help out with the docs once I have a better understanding of the code myself.
If i update the data
props of graph without remounting it, the graph goes out of place.
See the demo below.
I can fix it by adding
const simulation = forceSimulation();
simulation.strength = {};
to
react-vis-force/src/utils/d3-force.js
Line 263 in 6b66127
When using .map to create a list of and from data, the nodes are all being created and rendered into the upper left corner of the svg.
It looks like the centering logic and is not being calculated correctly when the .map creates an array of objects for each element, so while the elements are being created, the objects aren't being centered. Has anyone been able to use state data to .map through and create multiple within a and still center the graphic within the svg?
It seems to work when each element is hard coded, the issue is in mapping that data to create elements
It seems that the babel preset react-app
requires that NODE_ENV is set to either development
, test
, or production
. However, I need to deploy to a staging
environment. When trying to build my bundle with NODE_ENV set to staging
, I get the following error:
ERROR in ./~/react-vis-force/dist/react-vis-force.js
Module build failed: Error: Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: "staging".(While processing preset: "/Users/bibek/Developer/bm/bm-web/node_modules/babel-preset-react-app/index.js")
Not too sure if this issue belongs here or in the babel-preset-react-app repository but I'd appreciate some direction on this issue.
Since links are defined as source
and target
is it possible to show the direction on links? Some additional prop can be introduced to enable that.
Assume that defaultSelectedNode
is set, then even if it will be later set to null
the node will still be highlighted.
I need to group up the nodes of same color. I tried with forceCluster which is placed inside updateSimulation but not working. please suggest what's wrong with my code OR if there is another way available .
Using : InteractiveForceGraph
code looks like :
> updateSimulation={function( sim,options){
> sim.force('cluster', forceCluster()
> .centers(function (d) {
> return gCluster[that.getGroup(d.id).group] })
> .strength(5));
>
> sim.restart();
> return sim;
> }}
Normal alignment:
Alignment after filtering out some nodes and links:
(e.g. all nodes are messed somewhere near left top corner of canvas).
Options:
{
animate: false, // eats CPU like crazy
height: 1000,
width: 1200,
strength: {
collide: 5
}
}
Live demo: https://web-stats.herokuapp.com click on checkboxes at right side to see the bug.
I just tested a network ~3 to 4 times larger than the les mis network, and I noticed some significant slow downs in animation and interaction responsiveness relative to my d3-only implementation. Were you able to get performance equal to d3-only somehow? Is there a hard limit on the network size react-d3 can handle?
Hello, there
I used this package to show graph.
it has a lot of nodes and links.
When I implement this, it is very heavy to show.
How can I fix this?
Best Regards,
Gordal18
Each link in my graph has to have a different distance depending on a value I feed it. I've been breaking my head over this for a week and haven't been able to figure this out. It doesn't look like there's support for this in the library but if I had to implement it, where would I have to do it?
Did anyone able to add labels or tooltips to links ?
this way, we could allow things like bezier curving for circular dependencies, or things other than circles for nodes.
Module build failed: Error: Couldn't find preset "react-app" relative to directory "/Users/dan/stuff/unglish/node_modules/react-vis-force"
at /Users/dan/stuff/unglish/node_modules/babel-core/lib/transformation/file/options/option-manager.js:298:19
at Array.map (native)
at OptionManager.resolvePresets (/Users/dan/stuff/unglish/node_modules/babel-core/lib/transformation/file/options/option-manager.js:269:20)
at OptionManager.mergePresets (/Users/dan/stuff/unglish/node_modules/babel-core/lib/transformation/file/options/option-manager.js:258:10)
at OptionManager.mergeOptions (/Users/dan/stuff/unglish/node_modules/babel-core/lib/transformation/file/options/option-manager.js:243:14)
at OptionManager.init (/Users/dan/stuff/unglish/node_modules/babel-core/lib/transformation/file/options/option-manager.js:373:12)
at File.initOptions (/Users/dan/stuff/unglish/node_modules/babel-core/lib/transformation/file/index.js:221:65)
at new File (/Users/dan/stuff/unglish/node_modules/babel-core/lib/transformation/file/index.js:141:24)
at Pipeline.transform (/Users/dan/stuff/unglish/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/Users/dan/stuff/unglish/node_modules/babel-loader/index.js:38:20)
Usage:
import {ForceGraph, ForceGraphNode, ForceGraphLink} from 'react-vis-force';
Then after npm install babel-preset-react-app
:
Module build failed: Error: Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: undefined. (While processing preset: "/Users/dan/stuff/unglish/node_modules/babel-preset-react-app/index.js")
at Object.<anonymous> (/Users/dan/stuff/unglish/node_modules/babel-preset-react-app/index.js:49:9)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at /Users/dan/stuff/unglish/node_modules/babel-core/lib/transformation/file/options/option-manager.js:301:17
at Array.map (native)
I have positioned the node labels to be on top of my nodes. When I hover over a node, that node and it's dependencies are highlighted and their labels display, but if you move the mouse over the label, the nodes are no longer highlighted and labels go away.
The issue seems to be that with a label SVG over the circle SVG for the node, hover behavior is broken - I think it may need to propagate downward to the node.
Any advice for solving this or a way of working around it would be appreciated.
I render the force graph by some node infos;
I add a node to the graph.
The graph restart the simulation and render automatically.
The graph render automatically after I add a new node. But the simulation dosen't restart automatically.
so all nodes are pressed together.
How to manually restart the simulation?
I would like to use this react-vis-force to create graph with text inside the node. Any pointers would be helpful.
Hi guys, I'm having a graph with 50 nodes and connections, I rad the open issue about adding 'alpha' to the 'simulationOptios', the problem I am having is : how I can center the simulation to the center of 'ZoomSvg' and specifically the center of the 'rect' html element that is added under hood.
I want to set the rect x and y attributes.
Is there any way doing that??
Is it possible to define the size of each node like in the storybook 10 Nodes example?
https://uber.github.io/react-vis-force/?selectedKind=%3CForceGraph%20%2F%3E&selectedStory=10%20nodes&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel
When my canvas is smaller than the size of the graph at scale: 1, the panLimit sets the pan border too short creating a user experience that prevents the user from panning to see all of the graph at certain zoom levels. I'm not entirely sure why a pan limit is needed other than to prevent the user from panning the graph entirely off the visible screen and losing track of where the graph is. In my opinion given the funky behavior of the pan limit, I would opt for unlimited panning. I'm not sure how to fix this because it seems you would need to tell the ZoomableSVGGroup component where your graph border is and the pan limit would need to use that instead of the canvas width and height to calculate the pan limit.
id is currently required to be a string.
Numbers are also very convenient, so it'd be nice to support both.
When changing this to allow for both, there is a fallout issue that if the id is 0
, then it fails various truthy tests
I get the error "Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method." whenever my InteractiveForceGraph is unmounted. The error appears in ForceGraph. I am probably doing something wrong because due to repeated state changes the react dev tools crash as well. Can anyone guide me over what i am doing wrong? I have attached an image of the component code
Hi,
Would be great to have further documentation on ForceGraphLink. Having trouble figuring out how to set the distance between nodes. Thank you.
The targetRadius prop from ForceGraphArrowLink
is being passed down to the children elements due to the {...props} spread, and it's causing an error in ForceGraphLink
when rendering the <line>
tag;
Warning: Unknown prop `targetRadius` on <line> tag. Remove this prop from the element.
see: https://facebook.github.io/react/warnings/unknown-prop.html
width and height in simulationOptions should should be allowed to be strings rather than only numbers and default to '100%'. Setting them to '100%' now causes errors but sets the attributes correctly, resulting in the desired effect.
currently, warnings are spit out:
console.error node_modules/fbjs/lib/warning.js:36
Warning: ReactTestUtils has been moved to react-dom/test-utils. Update references to remove this warning.
console.error node_modules/fbjs/lib/warning.js:36
Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
console.error node_modules/fbjs/lib/warning.js:36
Warning: Shallow renderer has been moved to react-test-renderer/shallow. Update references to remove this warning.
๐ฅ preset-latest accomplishes the same task as babel-preset-env. ๐ Please install it with 'npm install babel-preset-env --save-dev'. '{ "presets": ["latest"] }' to '{ "presets": ["env"] }'. For more info, please check the docs: http://babeljs.io/docs/plugins/preset-env ๐. And let us know how you're liking Babel at @babeljs on ๐ฆ
First off, this library is brilliant! I love the idea of using React's declarative approach with d3.js.
I'm wondering how you feel about adding props for rendering the nodes and links of the graph? There could be a default prop for each, but the main idea would be to allow a consumer of this library to define their own Node and Link components and pass those in to the render props.
For instance, ForceGraphNode
could accept something like this
const Node = (props) => {
return (
<rect
{...props}
/>
);
}
<ForceGraphNode node={{ id: 'custom-node', label: 'Custom node' }} render={Node} />
This would require decoupling the specific rendering of svg elements like is being done with ForceGraphNode
and ForceGraphLink
in favor of enabling custom Node or Link components.
Hey, this is a very decent lib!
What is the best way of extending this to have a zoomable feature? e.g. like mentioned in this article: http://www.puzzlr.org/zoomable-force-directed-graph/
How to add label offset to the following example to make sure that label is the middle of the node.Please help urgent
<InteractiveForceGraph
simulationOptions={{ height: 300, width: 300 }}
labelAttr="label"
onSelectNode={(node) => console.log(node)}
highlightDependencies
<ForceGraphNode node={{ id: 'first-node', label: 'First node',offset:'' }} fill="red" />
<ForceGraphNode node={{ id: 'second-node', label: 'Second node' }} fill="blue" />
<ForceGraphLink link={{ source: 'first-node', target: 'second-node' }}/>
I wonder if there is any reason why the latest code on master is not released on npm?
I need some of the new functionalities, so I'd be very happy to download them via npm install.
Thank you & keep up good work!
Hello Guys, I need to drag-able the node with child and parents node also.
here is my code.
<InteractiveForceGraph
simulationOptions={
animate: true,
height: 900,
width: 1600,
strength: {
collide: 1,
},
}
highlightDependencies isShowLabels={false} showLabel={false} selectedNode={null} labelAttr="label" > {
//it is an array
this.state.peopleNetworkNodes.map((node, i) => {return ( <ForceGraphNode data-tip data-for="person" data-offset={"{'top': 45}"} node={{ id: i, radius: node.radius }} onMouseEnter={this.onMouseHover.bind(this, node.slug)} onClick={this.showPersonInfo.bind(this, node.slug)} fill={node.fill} key={i} /> ) }) } {
// it is other array to make a link
this.state.peopleNetworkLinks.map((link, i) => {
return (
<ForceGraphLink key={i} link={{ source: link.source, target: link.target, value: link.value, strokeWidth: link.strokeWidth }} />
)
})
}
I have tried to this draggable : true, in simulationOptions
I want to like ths : https://www.screencast.com/t/yykrHWwo
Right now, it's much better to strictly set edgeOffset
to 0, this is because the math is using simple addition and subtraction to make the adjustments, instead of using trig.
Use the XYAxis, LineSeries, MarkSeries, and LabelSeries from react-vis for rendering inside of ForceGraph. This will require some way to perform the zoom action that ForceGraph expects being implemented inside of react-vis.
Is there a way I can set the default scale or a callback to set the scale of InteractiveForceGraph
?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.