Configurable graph force strength and link length (#104)

* feat: Customize link length

The length of the links can be now configured via the config object. The specified length will include not only the visible segment of the link, but also the part hidden beneath the nodes it connects, which equals the half of each node' size.

* feat: Configure graph force strength

Now it's posible to customize the graph force strength, which will allow
the developer to define the gravity between the nodes. The longer the
value, the closer they will be. If, on the contrary, a big negative
value is set, the nodes will be far from each other.

* fix: Check if config.node exists before retrieving gravity

* feat: All values in D3_CONST are now configurable

The D3_CONST object has been removed, and all of the properties it had
inside are now configurable via the config object of the `Graph`
component.

All of these d3 related values are now wrapped in a new `d3` section
inside of the config object.

* refactor: Unneeded fallback line removed

* fix: Tests failing due to undefined newConfig.d3

src/components/graph/Graph.jsx

@@ -13,13 +13,6 @@ import * as graphRenderer from './graph.renderer';
 import * as graphHelper from './graph.helper';
 import utils from '../../utils';
 
-// Some d3 constant values
-const D3_CONST = {
-    FORCE_LINK_STRENGTH: 1,
-    LINK_IDEAL_DISTANCE: 100,
-    SIMULATION_ALPHA_TARGET: 0.05
-};
-
 /**
  * Graph component is the main component for react-d3-graph components, its interface allows its user
  * to build the graph once the user provides the data, configuration (optional) and callback interactions (also optional).
@@ -101,8 +94,8 @@ export default class Graph extends React.Component {
 
         const forceLink = d3ForceLink(this.state.d3Links)
             .id(l => l.id)
-            .distance(D3_CONST.LINK_IDEAL_DISTANCE)
-            .strength(D3_CONST.FORCE_LINK_STRENGTH);
+            .distance(this.state.config.d3.linkLength)
+            .strength(this.state.config.d3.linkStrength);
 
         this.state.simulation.force(CONST.LINK_CLASS_NAME, forceLink);
 
@@ -123,7 +116,7 @@ export default class Graph extends React.Component {
     _onDragEnd = () =>
         !this.state.config.staticGraph &&
         this.state.config.automaticRearrangeAfterDropNode &&
-        this.state.simulation.alphaTarget(D3_CONST.SIMULATION_ALPHA_TARGET).restart();
+        this.state.simulation.alphaTarget(this.state.config.d3.alphaTarget).restart();
 
     /**
      * Handles d3 'drag' event.
@@ -279,7 +272,7 @@ export default class Graph extends React.Component {
                 }
             }
 
-            this.state.simulation.alphaTarget(D3_CONST.SIMULATION_ALPHA_TARGET).restart();
+            this.state.simulation.alphaTarget(this.state.config.d3.alphaTarget).restart();
 
             this._tick();
         }

src/components/graph/graph.config.js

@@ -54,6 +54,14 @@
  * from the given nodes positions by rd3g), no coordinates will be calculated by rd3g or subjacent d3 modules.
  * @param {number} [width=800] - the width of the (svg) area where the graph will be rendered.
  * <br/>
+ * @param {Object} d3 d3 object is explained in next section. ⬇️
+ * @param {number} [d3.gravity=-100] - this will define how close nodes are to each other.
+ *  - If value is positive, nodes will attract each other.
+ *  - If value is negative, nodes will repel each other. Most of the times this is what we want, so nodes don't overlap.
+ * @param {number} [d3.linkLength=100] - the length of each link from the center of the nodes it joins.
+ * @param {number} [d3.linkStrength=1]
+ * @param {number} [d3.alphaTarget=0.05]
+ * <br/>
  * @param {Object} node node object is explained in next section. ⬇️
  * <h2 id="node-section">Node level configurations</h2>
  * @param {string} [node.color='#d3d3d3'] - 🔍🔍🔍 this is the color that will be applied to the node if no **color property**
@@ -150,6 +158,12 @@ export default {
     panAndZoom: false,
     staticGraph: false,
     width: 800,
+    d3: {
+        gravity: -100,
+        linkLength: 100,
+        linkStrength: 1,
+        alphaTarget: 0.05
+    },
     node: {
         color: '#d3d3d3',
         fontColor: 'black',

src/components/graph/graph.helper.js

@@ -42,15 +42,17 @@ const NODE_PROPS_WHITELIST = ['id', 'highlighted', 'x', 'y', 'index', 'vy', 'vx'
  * Wtf is a force? {@link https://github.com/d3/d3-force#forces| here}
  * @param  {number} width - the width of the container area of the graph.
  * @param  {number} height - the height of the container area of the graph.
+ * @param  {number} gravity - the force strength applied to the graph.
  * @returns {Object} returns the simulation instance to be consumed.
  * @memberof Graph/helper
  */
-function _createForceSimulation(width, height) {
+function _createForceSimulation(width, height, gravity) {
     const frx = d3ForceX(width / 2).strength(CONST.FORCE_X);
     const fry = d3ForceY(height / 2).strength(CONST.FORCE_Y);
+    const forceStrength = gravity;
 
     return d3ForceSimulation()
-        .force('charge', d3ForceManyBody().strength(CONST.FORCE_IDEAL_STRENGTH))
+        .force('charge', d3ForceManyBody().strength(forceStrength))
         .force('x', frx)
         .force('y', fry);
 }
@@ -360,7 +362,7 @@ function initializeGraphState({ data, id, config }, state) {
     let links = _initializeLinks(graph.links); // matrix of graph connections
     const { nodes: d3Nodes, links: d3Links } = graph;
     const formatedId = id.replace(/ /g, '_');
-    const simulation = _createForceSimulation(newConfig.width, newConfig.height);
+    const simulation = _createForceSimulation(newConfig.width, newConfig.height, newConfig.d3 && newConfig.d3.gravity);
 
     return {
         id: formatedId,