diff --git a/README.md b/README.md
index cec2ca024..479c23893 100644
--- a/README.md
+++ b/README.md
@@ -20,9 +20,10 @@
You can also load different datasets and configurations via URL query parameter, here are the links:
-* [small dataset](https://goodguydaniel.com/react-d3-graph/sandbox/index.html?data=small) - small example.
-* [custom node dataset](https://goodguydaniel.com/react-d3-graph/sandbox/index.html?data=custom-node) - sample config with custom views.
-* [marvel dataset!](https://goodguydaniel.com/react-d3-graph/sandbox/index.html?data=marvel) - sample config with directed collapsible graph and custom svg nodes.
+- [small dataset](https://goodguydaniel.com/react-d3-graph/sandbox/index.html?data=small) - small example.
+- [custom node dataset](https://goodguydaniel.com/react-d3-graph/sandbox/index.html?data=custom-node) - sample config with custom views.
+- [marvel dataset!](https://goodguydaniel.com/react-d3-graph/sandbox/index.html?data=marvel) - sample config with directed collapsible graph and custom svg nodes.
+- [static dataset!](https://goodguydaniel.com/react-d3-graph/sandbox/index.html?data=static) - small sample config statically positioned nodes.
Do you want to visualize your own data set on the live sandbox? Just submit a PR! You're welcome 😁
@@ -48,19 +49,18 @@ npm install react-d3-graph
> npm WARN react-d3-graph@2.0.1 requires a peer of d3@^5.5.0 but none is installed. You must install peer dependencies yourself.
> npm WARN react-d3-graph@2.0.1 requires a peer of react@^16.4.1 but none is installed. You must install peer dependencies yourself.
-
## Usage sample
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).
The code for the [live example](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html) can be consulted [here](https://github.com/danielcaldas/react-d3-graph/blob/master/sandbox/Sandbox.jsx).
```javascript
-import { Graph } from 'react-d3-graph';
+import { Graph } from "react-d3-graph";
// graph payload (with minimalist structure)
const data = {
- nodes: [{ id: 'Harry' }, { id: 'Sally' }, { id: 'Alice' }],
- links: [{ source: 'Harry', target: 'Sally' }, { source: 'Harry', target: 'Alice' }]
+ nodes: [{ id: "Harry" }, { id: "Sally" }, { id: "Alice" }],
+ links: [{ source: "Harry", target: "Sally" }, { source: "Harry", target: "Alice" }],
};
// the graph configuration, you only need to pass down properties
@@ -68,13 +68,13 @@ const data = {
const myConfig = {
nodeHighlightBehavior: true,
node: {
- color: 'lightgreen',
+ color: "lightgreen",
size: 120,
- highlightStrokeColor: 'blue'
+ highlightStrokeColor: "blue",
},
link: {
- highlightColor: 'lightblue'
- }
+ highlightColor: "lightblue",
+ },
};
// graph event callbacks
diff --git a/sandbox/data/static/static.config.js b/sandbox/data/static/static.config.js
new file mode 100644
index 000000000..22318c08d
--- /dev/null
+++ b/sandbox/data/static/static.config.js
@@ -0,0 +1,27 @@
+module.exports = {
+ height: 400,
+ width: 800,
+ nodeHighlightBehavior: true,
+ linkHighlightBehavior: true,
+ staticGraphWithDragAndDrop: true,
+ node: {
+ fontSize: 12,
+ highlightFontSize: 12,
+ highlightFontWeight: "bold",
+ highlightStrokeColor: "blue",
+ labelProperty: "name",
+ size: 500,
+ strokeWidth: 2,
+ },
+ link: {
+ highlightColor: "blue",
+ renderLabel: true,
+ highlightFontWeight: "bold",
+ semanticStrokeWidth: true,
+ fontSize: 12,
+ },
+ d3: {
+ gravity: -400,
+ linkLength: 180,
+ },
+};
diff --git a/sandbox/data/static/static.data.js b/sandbox/data/static/static.data.js
new file mode 100644
index 000000000..bdc9ae884
--- /dev/null
+++ b/sandbox/data/static/static.data.js
@@ -0,0 +1,50 @@
+module.exports = {
+ links: [
+ {
+ source: 1,
+ target: 2,
+ label: "A-B",
+ },
+ {
+ source: 1,
+ target: 3,
+ label: "A-C",
+ },
+ {
+ source: 1,
+ target: 4,
+ label: "A-D",
+ },
+ {
+ source: 3,
+ target: 4,
+ label: "C-D",
+ },
+ ],
+ nodes: [
+ {
+ id: 1,
+ name: "A",
+ x: 50,
+ y: 310,
+ },
+ {
+ id: 2,
+ name: "B",
+ x: 300,
+ y: 50,
+ },
+ {
+ id: 3,
+ name: "C",
+ x: 400,
+ y: 100,
+ },
+ {
+ id: 4,
+ name: "D",
+ x: 400,
+ y: 200,
+ },
+ ],
+};
diff --git a/src/components/graph/Graph.jsx b/src/components/graph/Graph.jsx
index 14615bf6c..6efad4876 100644
--- a/src/components/graph/Graph.jsx
+++ b/src/components/graph/Graph.jsx
@@ -464,11 +464,17 @@ export default class Graph extends React.Component {
componentDidUpdate() {
// if the property staticGraph was activated we want to stop possible ongoing simulation
- this.state.config.staticGraph && this.pauseSimulation();
+ const shouldPause = this.state.config.staticGraph || this.state.config.staticGraphWithDragAndDrop;
+
+ if (shouldPause) {
+ this.pauseSimulation();
+ }
if (!this.state.config.staticGraph && (this.state.newGraphElements || this.state.d3ConfigUpdated)) {
this._graphForcesConfig();
- this.restartSimulation();
+ if (!this.state.config.staticGraphWithDragAndDrop) {
+ this.restartSimulation();
+ }
this.setState({ newGraphElements: false, d3ConfigUpdated: false });
}
diff --git a/src/components/graph/graph.config.js b/src/components/graph/graph.config.js
index 87c29d1cb..1d539c173 100644
--- a/src/components/graph/graph.config.js
+++ b/src/components/graph/graph.config.js
@@ -7,7 +7,7 @@
* **Note about performance**
* Some of the properties have a major performance impact when toggled while rendering graphs of medium or large dimensions (hundreds or thousand of elements).
* These properties are marked with 🚅🚅🚅.
- * ⭐ **tip** *to achieve smoother interactions you may want to provide a toggle to set **staticGraph** to **true** *
+ * ⭐ **tip** *to achieve smoother interactions you may want to provide a toggle to set **staticGraph** or (better) **staticGraphWithDragAndDrop** to **true** *
*
* **Note about granularity**
* Some of the properties listed in the {@link #config-node|Node section} are marked with 🔍🔍🔍. This means that this properties
@@ -82,6 +82,9 @@
* all forces and drag events upon nodes will produce not effect. Note that, if this value is true the nodes will be
* rendered with the initial provided **x and y coordinates** (links positions will be automatically set
* from the given nodes positions by rd3g), no coordinates will be calculated by rd3g or subjacent d3 modules.
+ * @param {boolean} [staticGraphWithDragAndDrop] - exactly the same as above `staticGraph`, but it will allow users to drag&drop nodes.
+ * **Note**: If `staticGraph` is set to `true`, then `staticGraphWithDragAndDrop` will not produce the desired behaviour, make sure
+ * to set only one of them to `true`.
* @param {number} [width=800] - the width of the (svg) area where the graph will be rendered.
*
* @param {Object} d3 d3 object is explained in next section. ⬇️
@@ -219,6 +222,7 @@ export default {
nodeHighlightBehavior: false,
panAndZoom: false,
staticGraph: false,
+ staticGraphWithDragAndDrop: false,
width: 800,
d3: {
alphaTarget: 0.05,