Do explicit imports for d3 instead of wildcards

src/diagrams/class/classDb.js

@@ -1,4 +1,4 @@
-import * as d3 from 'd3';
+import { select } from 'd3';
 import { logger } from '../../logger';
 import { getConfig } from '../../config';
 import common from '../common/common';
@@ -245,21 +245,20 @@ export const relationType = {
 };
 
 const setupToolTips = function(element) {
-  let tooltipElem = d3.select('.mermaidTooltip');
+  let tooltipElem = select('.mermaidTooltip');
   if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
-    tooltipElem = d3
-      .select('body')
+    tooltipElem = select('body')
       .append('div')
       .attr('class', 'mermaidTooltip')
       .style('opacity', 0);
   }
 
-  const svg = d3.select(element).select('svg');
+  const svg = select(element).select('svg');
 
   const nodes = svg.selectAll('g.node');
   nodes
     .on('mouseover', function() {
-      const el = d3.select(this);
+      const el = select(this);
       const title = el.attr('title');
       // Dont try to draw a tooltip if no data is provided
       if (title === null) {
@@ -282,7 +281,7 @@ const setupToolTips = function(element) {
         .transition()
         .duration(500)
         .style('opacity', 0);
-      const el = d3.select(this);
+      const el = select(this);
       el.classed('hover', false);
     });
 };

src/diagrams/class/classRenderer.js

@@ -1,4 +1,4 @@
-import * as d3 from 'd3';
+import { select } from 'd3';
 import dagre from 'dagre';
 import graphlib from 'graphlib';
 import { logger } from '../../logger';
@@ -156,7 +156,7 @@ export const draw = function(text, id) {
   logger.info('Rendering diagram ' + text);
 
   // Fetch the default direction, use TD if none was found
-  const diagram = d3.select(`[id='${id}']`);
+  const diagram = select(`[id='${id}']`);
   insertMarkers(diagram);
 
   // Layout graph, Create a new directed graph
@@ -208,7 +208,7 @@ export const draw = function(text, id) {
   g.nodes().forEach(function(v) {
     if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {
       logger.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));
-      d3.select('#' + lookUpDomId(v)).attr(
+      select('#' + lookUpDomId(v)).attr(
         'transform',
         'translate(' +
           (g.node(v).x - g.node(v).width / 2) +

src/diagrams/class/svgDraw.js

@@ -1,5 +1,5 @@
-import * as d3 from 'd3';
-import classDb, { lookUpDomId } from './classDb';
+import { line, curveBasis } from 'd3';
+import { lookUpDomId, relationType } from './classDb';
 import utils from '../../utils';
 import { logger } from '../../logger';
 
@@ -7,13 +7,13 @@ let edgeCount = 0;
 export const drawEdge = function(elem, path, relation, conf) {
   const getRelationType = function(type) {
     switch (type) {
-      case classDb.relationType.AGGREGATION:
+      case relationType.AGGREGATION:
         return 'aggregation';
-      case classDb.relationType.EXTENSION:
+      case relationType.EXTENSION:
         return 'extension';
-      case classDb.relationType.COMPOSITION:
+      case relationType.COMPOSITION:
         return 'composition';
-      case classDb.relationType.DEPENDENCY:
+      case relationType.DEPENDENCY:
         return 'dependency';
     }
   };
@@ -24,15 +24,14 @@ export const drawEdge = function(elem, path, relation, conf) {
   const lineData = path.points;
 
   // This is the accessor function we talked about above
-  const lineFunction = d3
-    .line()
+  const lineFunction = line()
     .x(function(d) {
       return d.x;
     })
     .y(function(d) {
       return d.y;
     })
-    .curve(d3.curveBasis);
+    .curve(curveBasis);
 
   const svgPath = elem
     .append('path')