Refactor/d3 tree shaking (#16)

* Tree shake import in Node/helper.js

* d3-force tree-shaking on Graph/helper.jsx

* Many d3 module tree shaking in Graph/index.jsx

* Always add prefix d3 in imports. Organize imports order

Author: danielcaldas

src/components/Graph/helper.jsx

@@ -5,7 +5,12 @@
  */
 import React from 'react';
 
-import * as d3 from 'd3';
+import {
+    forceX as d3ForceX,
+    forceY as d3ForceY,
+    forceSimulation as d3ForceSimulation,
+    forceManyBody as d3ForceManyBody
+} from 'd3-force';
 
 import CONST from './const';
 
@@ -206,13 +211,13 @@ function buildGraph(nodes, nodeCallbacks, links, linkCallbacks, config, someNode
  * @memberof Graph/helper
  */
 function createForceSimulation(width, height) {
-    const forceX = d3.forceX(width / 2).strength(CONST.FORCE_X);
-    const forceY = d3.forceY(height / 2).strength(CONST.FORCE_Y);
+    const frx = d3ForceX(width / 2).strength(CONST.FORCE_X);
+    const fry = d3ForceY(height / 2).strength(CONST.FORCE_Y);
 
-    const simulation = d3.forceSimulation()
-            .force('charge', d3.forceManyBody().strength(CONST.FORCE_IDEAL_STRENGTH))
-            .force('x', forceX)
-            .force('y', forceY);
+    const simulation = d3ForceSimulation()
+            .force('charge', d3ForceManyBody().strength(CONST.FORCE_IDEAL_STRENGTH))
+            .force('x', frx)
+            .force('y', fry);
 
     return simulation;
 }

src/components/Graph/index.jsx

@@ -1,6 +1,13 @@
 import React from 'react';
 
-import * as d3 from 'd3';
+import { drag as d3Drag } from 'd3-drag';
+import { forceLink as d3ForceLink } from 'd3-force';
+import {
+    select as d3Select,
+    selectAll as d3SelectAll,
+    event as d3Event
+} from 'd3-selection';
+import { zoom as d3Zoom } from 'd3-zoom';
 
 import CONST from './const';
 import DEFAULT_CONFIG from './config';
@@ -88,8 +95,8 @@ export default class Graph extends React.Component {
             // This is where d3 and react bind
             let draggedNode = this.state.nodes[this.state.nodeIndexMapping[index]];
 
-            draggedNode.x += d3.event.dx;
-            draggedNode.y += d3.event.dy;
+            draggedNode.x += d3Event.dx;
+            draggedNode.y += d3Event.dy;
 
             // Set nodes fixing coords fx and fy
             draggedNode['fx'] = draggedNode.x;
@@ -134,18 +141,18 @@ export default class Graph extends React.Component {
      * {@link https://github.com/d3/d3-zoom#zoom}
      * @return {undefined}
      */
-    _zoomConfig = () => d3.select(`#${this.state.id}-${CONST.GRAPH_WRAPPER_ID}`)
-                            .call(d3.zoom().scaleExtent([this.state.config.minZoom, this.state.config.maxZoom])
+    _zoomConfig = () => d3Select(`#${this.state.id}-${CONST.GRAPH_WRAPPER_ID}`)
+                            .call(d3Zoom().scaleExtent([this.state.config.minZoom, this.state.config.maxZoom])
                             .on('zoom', this._zoomed));
 
     /**
      * Handler for 'zoom' event within zoom config.
      * @return {Object} returns the transformed elements within the svg graph area.
      */
     _zoomed = () => {
-        const transform = d3.event.transform;
+        const transform = d3Event.transform;
 
-        d3.selectAll(`#${this.state.id}-${CONST.GRAPH_CONTAINER_ID}`).attr('transform', transform);
+        d3SelectAll(`#${this.state.id}-${CONST.GRAPH_CONTAINER_ID}`).attr('transform', transform);
 
         this.state.config.panAndZoom && this.setState({ transform: transform.k });
     }
@@ -278,19 +285,19 @@ export default class Graph extends React.Component {
     _graphForcesConfig() {
         this.state.simulation.nodes(this.state.d3Nodes).on('tick', this._tick);
 
-        const forceLink = d3.forceLink(this.state.d3Links)
+        const forceLink = d3ForceLink(this.state.d3Links)
                             .id(l => l.id)
                             .distance(CONST.LINK_IDEAL_DISTANCE)
                             .strength(1);
 
         this.state.simulation.force(CONST.LINK_CLASS_NAME, forceLink);
 
-        const customNodeDrag = d3.drag()
+        const customNodeDrag = d3Drag()
                                 .on('start', this._onDragStart)
                                 .on('drag', this._onDragMove)
                                 .on('end', this._onDragEnd);
 
-        d3.select(`#${this.state.id}-${CONST.GRAPH_WRAPPER_ID}`).selectAll('.node').call(customNodeDrag);
+        d3Select(`#${this.state.id}-${CONST.GRAPH_WRAPPER_ID}`).selectAll('.node').call(customNodeDrag);
     }
 
     constructor(props) {

src/components/Node/helper.js

@@ -3,7 +3,16 @@
  * @description
  * Some methods that help no the process of rendering a node.
  */
-import * as d3 from 'd3';
+import {
+    symbolCircle as d3SymbolCircle,
+    symbolCross as d3SymbolCross,
+    symbolDiamond as d3SymbolDiamond,
+    symbolSquare as d3SymbolSquare,
+    symbolStar as d3SymbolStar,
+    symbolTriangle as d3SymbolTriangle,
+    symbolWye as d3SymbolWye,
+    symbol as d3Symbol
+} from 'd3-shape';
 
 import CONST from './const';
 
@@ -18,21 +27,21 @@ import CONST from './const';
 function _convertTypeToD3Symbol(typeName) {
     switch (typeName) {
         case CONST.SYMBOLS.CIRCLE:
-            return d3.symbolCircle;
+            return d3SymbolCircle;
         case CONST.SYMBOLS.CROSS:
-            return d3.symbolCross;
+            return d3SymbolCross;
         case CONST.SYMBOLS.DIAMOND:
-            return d3.symbolDiamond;
+            return d3SymbolDiamond;
         case CONST.SYMBOLS.SQUARE:
-            return d3.symbolSquare;
+            return d3SymbolSquare;
         case CONST.SYMBOLS.STAR:
-            return d3.symbolStar;
+            return d3SymbolStar;
         case CONST.SYMBOLS.TRIANGLE:
-            return d3.symbolTriangle;
+            return d3SymbolTriangle;
         case CONST.SYMBOLS.WYE:
-            return d3.symbolWye;
+            return d3SymbolWye;
         default:
-            return d3.symbolCircle;
+            return d3SymbolCircle;
     }
 }
 
@@ -45,9 +54,9 @@ function _convertTypeToD3Symbol(typeName) {
  * @memberof Node/helper
  */
 function buildSvgSymbol(size=80, symbolTypeDesc=CONST.SYMBOLS.CIRCLE) {
-    return d3.symbol()
+    return d3Symbol()
             .size(() => size)
-            .type(() => _convertTypeToD3Symbol(symbolTypeDesc))(); // @todo: Strange behavior d3.Symbol ret function
+            .type(() => _convertTypeToD3Symbol(symbolTypeDesc))(); // @todo: Strange behavior Symbol ret function
 }
 
 export default {