Adding a parameter in config to be able to disable link force (#278)

Author: antoninklopp

docs/DOCUMENTATION.md

@@ -362,6 +362,7 @@ const graph = {
         -   If value is negative, nodes will repel each other. Most of the times this is what we want, so nodes don"t overlap. (optional, default `-100`)
     -   `d3.linkLength` **[number][96]** the length of each link from the center of the nodes it joins. (optional, default `100`)
     -   `d3.linkStrength` **[number][96]** [see d3-force link.strength][107]
+    -   `d3.disableLinkForce` **[number][96]** when setting this value to true, the nodes will stay at the position chosen by the user, and no other d3 simulation will be done. (optional, default `false`)
         <br/> (optional, default `1`)
 -   `node` **[Object][99]** node object is explained in next section. ⬇️<h2 id="config-node"><a href="#config-node">#</a> Node level configurations</h2>
     -   `node.color` **[string][98]** 🔍🔍🔍 this is the color that will be applied to the node if no **color property**
@@ -1204,9 +1205,11 @@ components.
     },
     ...
     }
+
     ```
 
     ```
+
 -   `linkCallbacks` **[Array][100]&lt;[Function][101]>** array of callbacks for used defined event handler for link interactions.
 -   `config` **[Object][99]** an object containing rd3g consumer defined configurations [config][118] for the graph.
 -   `highlightedNode` **[string][98]** this value contains a string that represents the some currently highlighted node.

sandbox/data/static/static.config.js

@@ -23,5 +23,6 @@ module.exports = {
     d3: {
         gravity: -400,
         linkLength: 180,
+        disableLinkForce: true,
     },
 };

src/components/graph/Graph.jsx

@@ -183,8 +183,10 @@ export default class Graph extends React.Component {
      * @returns {undefined}
      */
     _graphBindD3ToReactComponent() {
-        this.state.simulation.nodes(this.state.d3Nodes).on("tick", this._tick);
-        this._graphLinkForceConfig();
+        if (!this.state.config.d3.disableLinkForce) {
+            this.state.simulation.nodes(this.state.d3Nodes).on("tick", this._tick);
+            this._graphLinkForceConfig();
+        }
         this._graphNodeDragConfig();
     }
 

src/components/graph/graph.config.js

@@ -237,6 +237,7 @@ export default {
         gravity: -100,
         linkLength: 100,
         linkStrength: 1,
+        disableLinkForce: false,
     },
     node: {
         color: "#d3d3d3",