diff --git a/docs/DOCUMENTATION.md b/docs/DOCUMENTATION.md index 63706fa34..c64b896d6 100644 --- a/docs/DOCUMENTATION.md +++ b/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`)
(optional, default `1`) - `node` **[Object][99]** node object is explained in next section. ⬇️

# Node level configurations

- `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]<[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. diff --git a/sandbox/data/static/static.config.js b/sandbox/data/static/static.config.js index 22318c08d..4b916cb75 100644 --- a/sandbox/data/static/static.config.js +++ b/sandbox/data/static/static.config.js @@ -23,5 +23,6 @@ module.exports = { d3: { gravity: -400, linkLength: 180, + disableLinkForce: true, }, }; diff --git a/src/components/graph/Graph.jsx b/src/components/graph/Graph.jsx index c6a7b18bf..ab3aba932 100644 --- a/src/components/graph/Graph.jsx +++ b/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(); } diff --git a/src/components/graph/graph.config.js b/src/components/graph/graph.config.js index 31543bd79..1b4b981ef 100644 --- a/src/components/graph/graph.config.js +++ b/src/components/graph/graph.config.js @@ -237,6 +237,7 @@ export default { gravity: -100, linkLength: 100, linkStrength: 1, + disableLinkForce: false, }, node: { color: "#d3d3d3",