#126 Add radial force to prevent unlinked nodes from scattering

js/components/interface/graph-visualization/Graph.js

@@ -20,6 +20,7 @@ export default class GeppettoGraphVisualization extends Component {
   doubleGap = Math.floor((this.props.nodeRelSize ? this.props.nodeRelSize : 20) * 0.25)
   tripleGap = Math.floor((this.props.nodeRelSize ? this.props.nodeRelSize : 20) * 0.35)
 
+  timeToCenter2DCamera = this.props.timeToCenter2DCamera ? this.props.timeToCenter2DCamera : 1500
 
   componentDidMount (){
     const { data, url } = this.props
@@ -31,6 +32,7 @@ export default class GeppettoGraphVisualization extends Component {
       this.ggv.current.d3Force('collide', d3.forceCollide(this.size));
       this.ggv.current.d3Force('link').distance(forceLinkDistance).strength(forceLinkStrength)
       this.ggv.current.d3Force('charge').strength(forceChargeStrength)
+      this.ggv.current.d3Force('radial', d3.forceRadial(this.props.forceRadial ? this.props.forceRadial : 1))
     }
     if (url) {
       this.addToScene()
@@ -46,7 +48,7 @@ export default class GeppettoGraphVisualization extends Component {
   componentDidUpdate () {
     const dimensions = ReactDOM.findDOMNode(this).parentNode.getBoundingClientRect()
     if (this.props.d2) {
-      this.ggv.current.centerAt(0)
+      this.ggv.current.centerAt(0, 0, this.timeToCenter2DCamera)
     }
     if (dimensions.width !== this.dimensions.width || dimensions.height !== this.dimensions.height) {
       this.dimensions = dimensions

js/components/interface/graph-visualization/README.md

@@ -19,6 +19,8 @@
 }
 ```
 
+If we update the data preserving the references to each node, then the graph will preserve the position, but if a new reference is provided for a particular node, then the graph will reset the position of that particular node.
+
 - **d2**: Bool (Optional. Default: false)
     If true, the graph would be 2D.
 
@@ -52,6 +54,10 @@
     Adjust the stiffness coiefficient for the spring simulated between two nodes
 - **forceChargeStrength**: Int (Optional. Default: -200).
     Adjust the repulsion coefficient simulated between two nodes.
+- **timeToCenter2DCamera**: Int (Optional. Default: 3000).
+    Transition time in ms when centering camera in 2D Graph after window resize event.
+- **forceRadial**: Int (Optional. Default: 1).
+    Creates a radial atractive force of radial circle equal to forceRadial. Useful to avoid nodes scattering away when they have no links.
 
 ## Disable drag and forces for some nodes