uber/react-vis-force

d3-force graphs as React Components.

react-vis-force

See the live demo at http://uber.github.io/react-vis-force

Overview

react-vis-force applies the react-vis and d4-style component approach to the d3-force library. This allows users to declaratively provide links and nodes as children of a ForceGraph component.

Example

import React from 'react';
import {ForceGraph, ForceGraphNode, ForceGraphLink} from 'react-vis-force';

<ForceGraph simulationOptions={{ height: 300, width: 300 }}>
  <ForceGraphNode node={{ id: 'first-node' }} fill="red" />
  <ForceGraphNode node={{ id: 'second-node' }} fill="blue" />
  <ForceGraphLink link={{ source: 'first-node', target: 'second-node' }} />
</ForceGraph>

Docs

• InteractiveForceGraph
• ForceGraph

react-vis-force's Issues

can we Draggable Nodes by this plugin?

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

Larger network animation/interaction performance

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?

Render Prop for Nodes and Links

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.

Add zoomable

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/

Module build failed: Error: Couldn't find preset "react-app" relative to directory

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)

Center simulation on update

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

Set scale

Is there a way I can set the default scale or a callback to set the scale of InteractiveForceGraph?

Missing function to deselect a currently selected node

Assume that defaultSelectedNode is set, then even if it will be later set to null the node will still be highlighted.

I need help

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

Is there a way to draw images inside the nodes?

Hi team!

First of all, congratulation for the excellent work that you've done on react-vis-force.

Second, I would like to know if is there a way to create a diagram like the picture below (that is using D3):

I'd like to create something similar to that using react-vis-force

Cannot find module './factoryWithTypeCheckers' from node_modules/react-vis-force/dist

https://stackoverflow.com/questions/46696683/react-component-vis-force-module-error/46696912?noredirect=1#comment80367851_46696912

Render same color of nodes in a group ?

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;
> }}

Alignment is screwed up when nodes are being added/deleted

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.

graph position wrong after data prop change

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

applyAlphaFactors(simulation, options);

and renaming the simulation param, but that doesn't look like a proper fix.

what props to use for zoom and drag?

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.

labelOffset

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' }}/>

Documentation for Links

Hi,

Would be great to have further documentation on ForceGraphLink. Having trouble figuring out how to set the distance between nodes. Thank you.

update create-react-app deps to the latest to avoid log warnings during build

💥  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 🐦

Node sizes

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

use async setState to prevent potential future issues

Remaining tests for ZoomableSVGGroup

Add Labels to Links

Did anyone able to add labels or tooltips to links ?

make tests react 15.5 friendly

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.

automatic deployment to GitHub Pages on successful TravisCI build

https://gist.github.com/domenic/ec8b0fc8ab45f39403dd

Zoom panLimit prematurely prevents panning

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.

Fix <ForceGraphArrowLink /> components

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.

Usage of babel-preset-react-app prevents building for certain NODE_ENVs

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.

react-storybook for docs, remove demo section

Adding text to each node and make them visible

I would like to use this react-vis-force to create graph with text inside the node. Any pointers would be helpful.

Question: Is it possible to "move" a node via a mouse drag?

Version release that includes fix for pass-through props please!

targetRadius being passed to <line> tag

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

Labels over nodes break hover

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.

Animate: true causes state update even after component is unmounted

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

edgeOffset math is inaccurate

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.

centering not happening when using .map to create multiple nodes and links

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

Question: How does `highlightDependencies` flag work?

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.

open source ZoomableSVGGroup separately

use react-vis as underlying rendering engine

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.

Question: how to manually restart the simulation?

What I do?

I render the force graph by some node infos;
I add a node to the graph.

What I want?

The graph restart the simulation and render automatically.

What's problem?

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?

Tests for InteractiveForceGraph

Unable to add variable distances

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?

master <> latest release

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!

Make a graph with circles bigger than radius:5

How do I make a Graph with circles bigger than 5 px ( or whatever the unit is)?
If I do radius: 50 , the links do not scale along with the new radius. so how do you change the links length, size ?

<ForceGraphNode
                  key={id}
                  node={{
                    id,
                    label,
                    // radius:50
                  }}
                  fill={data.nodes.type}

Arrows are hidden behind large sized nodes

In this screenshot it's quite visible that the bigger the node, the more likely it will cover the arrow. Some nodes cover the arrows entirely. Arrows should be re-positioned.

width and height in simulationOptions should default to '100%'

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.

allow override implementations on Nodes and Links

this way, we could allow things like bezier curving for circular dependencies, or things other than circles for nodes.

id needs to be a string

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