Feature/initial zoom

docs/DOCUMENTATION.md

@@ -344,7 +344,8 @@ const graph = {
 -   `highlightOpacity` **[number][96]** this value is used to highlight nodes in the network. The lower
     the value the more the less highlighted nodes will be visible (related to _nodeHighlightBehavior_). (optional, default `1`)
 -   `maxZoom` **[number][96]** max zoom that can be performed against the graph. (optional, default `8`)
--   `minZoom` **[number][96]** min zoom that can be performed against the graph. (optional, default `0.1`)
+-   `minZoom` **[number][96]** min zoom that can be performed
+-   `initialZoom` **[number][96]** initial zoom that can be performed against the graph. (optional, default `1`)
 -   `panAndZoom` **[boolean][97]** 🚅🚅🚅 pan and zoom effect when performing zoom in the graph,
     a similar functionality may be consulted [here][104]. (optional, default `false`)
 -   `staticGraph` **[boolean][97]** when setting this value to true the graph will be completely static, thus

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-d3-graph",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "React component to build interactive and configurable graphs with d3 effortlessly",
   "author": "Daniel Caldas",
   "license": "MIT",

src/components/graph/Graph.jsx

@@ -277,13 +277,16 @@ export default class Graph extends React.Component {
      * @returns {undefined}
      */
     _zoomConfig = () => {
-        d3Select(`#${this.state.id}-${CONST.GRAPH_WRAPPER_ID}`)
-            .call(
-                d3Zoom()
-                    .scaleExtent([this.state.config.minZoom, this.state.config.maxZoom])
-                    .on("zoom", this._zoomed)
-            )
-            .on("dblclick.zoom", null);
+        const selector = d3Select(`#${this.state.id}-${CONST.GRAPH_WRAPPER_ID}`);
+
+        const zoomObject = d3Zoom()
+            .scaleExtent([this.state.config.minZoom, this.state.config.maxZoom])
+            .on("zoom", this._zoomed);
+
+        // set initial zoom
+        zoomObject.scaleTo(selector, this.state.config.initialZoom);
+
+        selector.call(zoomObject).on("dblclick.zoom", null);
     };
 
     /**

src/components/graph/graph.config.js

@@ -80,6 +80,7 @@
  * the value the more the less highlighted nodes will be visible (related to <i>nodeHighlightBehavior</i>).
  * @param {number} [maxZoom=8] - max zoom that can be performed against the graph.
  * @param {number} [minZoom=0.1] - min zoom that can be performed against the graph.
+ * @param {number} [initialZoom=1] - initial zoom that can be performed against the graph.
  * @param {boolean} [panAndZoom=false] - 🚅🚅🚅 pan and zoom effect when performing zoom in the graph,
  * a similar functionality may be consulted <a target="_blank" href="https://bl.ocks.org/mbostock/2a39a768b1d4bc00a09650edef75ad39">here</a>.
  * @param {boolean} [staticGraph=false] - when setting this value to true the graph will be completely static, thus
@@ -229,6 +230,7 @@ export default {
     linkHighlightBehavior: false,
     maxZoom: 8,
     minZoom: 0.1,
+    initialZoom: 1,
     nodeHighlightBehavior: false,
     panAndZoom: false,
     staticGraph: false,