Do explicit imports for d3 instead of wildcards

src/dagre-wrapper/edges.js

@@ -1,6 +1,6 @@
 import { logger } from '../logger'; // eslint-disable-line
 import createLabel from './createLabel';
-import * as d3 from 'd3';
+import { line, curveBasis } from 'd3';
 import { getConfig } from '../config';
 
 let edgeLabels = {};
@@ -157,15 +157,14 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
   const lineData = points.filter(p => !Number.isNaN(p.y));
 
   // This is the accessor function we talked about above
-  const lineFunction = d3
+  const lineFunction = line()
-    .line()
     .x(function(d) {
       return d.x;
     })
     .y(function(d) {
       return d.y;
     })
-    .curve(d3.curveBasis);
+    .curve(curveBasis);
 
   const svgPath = elem
     .append('path')

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
+    tooltipElem = select('body')
-      .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 { line, curveBasis } from 'd3';
-import classDb, { lookUpDomId } from './classDb';
+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
+  const lineFunction = line()
-    .line()
     .x(function(d) {
       return d.x;
     })
     .y(function(d) {
       return d.y;
     })
-    .curve(d3.curveBasis);
+    .curve(curveBasis);
 
   const svgPath = elem
     .append('path')

src/diagrams/er/erRenderer.js

@@ -1,5 +1,5 @@
 import graphlib from 'graphlib';
-import * as d3 from 'd3';
+import { line, curveBasis, select } from 'd3';
 import erDb from './erDb';
 import erParser from './parser/erDiagram';
 import dagre from 'dagre';
@@ -136,15 +136,14 @@ const drawRelationshipFromLayout = function(svg, rel, g, insert) {
   const edge = g.edge(rel.entityA, rel.entityB, getEdgeName(rel));
 
   // Get a function that will generate the line path
-  const lineFunction = d3
+  const lineFunction = line()
-    .line()
     .x(function(d) {
       return d.x;
     })
     .y(function(d) {
       return d.y;
     })
-    .curve(d3.curveBasis);
+    .curve(curveBasis);
 
   // Insert the line at the right place
   const svgPath = svg
@@ -271,7 +270,7 @@ export const draw = function(text, id) {
   }
 
   // Get a reference to the svg node that contains the text
-  const svg = d3.select(`[id='${id}']`);
+  const svg = select(`[id='${id}']`);
 
   // Add cardinality marker definitions to the svg
   erMarkers.insertMarkers(svg, conf);

src/diagrams/flowchart/flowDb.js

@@ -1,4 +1,4 @@
-import * as d3 from 'd3';
+import { select } from 'd3';
 import { logger } from '../../logger'; // eslint-disable-line
 import utils from '../../utils';
 import { getConfig } from '../../config';
@@ -309,21 +309,20 @@ export const getClasses = function() {
 };
 
 const setupToolTips = function(element) {
-  let tooltipElem = d3.select('.mermaidTooltip');
+  let tooltipElem = select('.mermaidTooltip');
   if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
-    tooltipElem = d3
+    tooltipElem = select('body')
-      .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) {
@@ -346,7 +345,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/flowchart/flowRenderer-v2.js

@@ -1,5 +1,5 @@
 import graphlib from 'graphlib';
-import * as d3 from 'd3';
+import { select, curveLinear, selectAll } from 'd3';
 
 import flowDb from './flowDb';
 import flow from './parser/flow';
@@ -25,7 +25,7 @@ export const setConf = function(cnf) {
  * @param g The graph that is to be drawn.
  */
 export const addVertices = function(vert, g, svgId) {
-  const svg = d3.select(`[id="${svgId}"]`);
+  const svg = select(`[id="${svgId}"]`);
   const keys = Object.keys(vert);
 
   // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
@@ -224,11 +224,11 @@ export const addEdges = function(edges, g) {
     edgeData.labelStyle = labelStyle;
 
     if (typeof edge.interpolate !== 'undefined') {
-      edgeData.curve = interpolateToCurve(edge.interpolate, d3.curveLinear);
+      edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
     } else if (typeof edges.defaultInterpolate !== 'undefined') {
-      edgeData.curve = interpolateToCurve(edges.defaultInterpolate, d3.curveLinear);
+      edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
     } else {
-      edgeData.curve = interpolateToCurve(conf.curve, d3.curveLinear);
+      edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
     }
 
     if (typeof edge.text === 'undefined') {
@@ -336,7 +336,7 @@ export const draw = function(text, id) {
   for (i = subGraphs.length - 1; i >= 0; i--) {
     subG = subGraphs[i];
 
-    d3.selectAll('cluster').append('text');
+    selectAll('cluster').append('text');
 
     for (let j = 0; j < subG.nodes.length; j++) {
       g.setParent(subG.nodes[j], subG.id);
@@ -349,10 +349,10 @@ export const draw = function(text, id) {
   // flowChartShapes.addToRenderV2(addShape);
 
   // Set up an SVG group so that we can translate the final graph.
-  const svg = d3.select(`[id="${id}"]`);
+  const svg = select(`[id="${id}"]`);
 
   // Run the renderer. This is what draws the final graph.
-  const element = d3.select('#' + id + ' g');
+  const element = select('#' + id + ' g');
   render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);
   // dagre.layout(g);
 
@@ -433,7 +433,7 @@ export const draw = function(text, id) {
     const vertex = vert[key];
 
     if (vertex.link) {
-      const node = d3.select('#' + id + ' [id="' + key + '"]');
+      const node = select('#' + id + ' [id="' + key + '"]');
       if (node) {
         const link = document.createElementNS('http://www.w3.org/2000/svg', 'a');
         link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' '));

src/diagrams/flowchart/flowRenderer.js

@@ -1,5 +1,5 @@
 import graphlib from 'graphlib';
-import * as d3 from 'd3';
+import { select, curveLinear, selectAll } from 'd3';
 
 import flowDb from './flowDb';
 import flow from './parser/flow';
@@ -26,7 +26,7 @@ export const setConf = function(cnf) {
  * @param g The graph that is to be drawn.
  */
 export const addVertices = function(vert, g, svgId) {
-  const svg = d3.select(`[id="${svgId}"]`);
+  const svg = select(`[id="${svgId}"]`);
   const keys = Object.keys(vert);
 
   // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
@@ -206,11 +206,11 @@ export const addEdges = function(edges, g) {
     edgeData.labelStyle = labelStyle;
 
     if (typeof edge.interpolate !== 'undefined') {
-      edgeData.curve = interpolateToCurve(edge.interpolate, d3.curveLinear);
+      edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
     } else if (typeof edges.defaultInterpolate !== 'undefined') {
-      edgeData.curve = interpolateToCurve(edges.defaultInterpolate, d3.curveLinear);
+      edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
     } else {
-      edgeData.curve = interpolateToCurve(conf.curve, d3.curveLinear);
+      edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
     }
 
     if (typeof edge.text === 'undefined') {
@@ -315,7 +315,7 @@ export const draw = function(text, id) {
   for (i = subGraphs.length - 1; i >= 0; i--) {
     subG = subGraphs[i];
 
-    d3.selectAll('cluster').append('text');
+    selectAll('cluster').append('text');
 
     for (let j = 0; j < subG.nodes.length; j++) {
       g.setParent(subG.nodes[j], subG.id);
@@ -370,10 +370,10 @@ export const draw = function(text, id) {
   };
 
   // Set up an SVG group so that we can translate the final graph.
-  const svg = d3.select(`[id="${id}"]`);
+  const svg = select(`[id="${id}"]`);
 
   // Run the renderer. This is what draws the final graph.
-  const element = d3.select('#' + id + ' g');
+  const element = select('#' + id + ' g');
   render(element, g);
 
   element.selectAll('g.node').attr('title', function() {
@@ -412,7 +412,7 @@ export const draw = function(text, id) {
       const xPos = clusterRects[0].x.baseVal.value;
       const yPos = clusterRects[0].y.baseVal.value;
       const width = clusterRects[0].width.baseVal.value;
-      const cluster = d3.select(clusterEl[0]);
+      const cluster = select(clusterEl[0]);
       const te = cluster.select('.label');
       te.attr('transform', `translate(${xPos + width / 2}, ${yPos + 14})`);
       te.attr('id', id + 'Text');
@@ -449,7 +449,7 @@ export const draw = function(text, id) {
     const vertex = vert[key];
 
     if (vertex.link) {
-      const node = d3.select('#' + id + ' [id="' + key + '"]');
+      const node = select('#' + id + ' [id="' + key + '"]');
       if (node) {
         const link = document.createElementNS('http://www.w3.org/2000/svg', 'a');
         link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' '));

src/diagrams/gantt/ganttRenderer.js

@@ -1,5 +1,13 @@
-import * as d3 from 'd3';
+import {
-
+  select,
+  scaleTime,
+  min,
+  max,
+  scaleLinear,
+  interpolateHcl,
+  axisBottom,
+  timeFormat
+} from 'd3';
 import { parser } from './parser/gantt';
 import common from '../common/common';
 import ganttDb from './ganttDb';
@@ -48,16 +56,15 @@ export const draw = function(text, id) {
   elem.setAttribute('height', '100%');
   // Set viewBox
   elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
-  const svg = d3.select(`[id="${id}"]`);
+  const svg = select(`[id="${id}"]`);
 
   // Set timescale
-  const timeScale = d3
+  const timeScale = scaleTime()
-    .scaleTime()
     .domain([
-      d3.min(taskArray, function(d) {
+      min(taskArray, function(d) {
         return d.startTime;
       }),
-      d3.max(taskArray, function(d) {
+      max(taskArray, function(d) {
         return d.endTime;
       })
     ])
@@ -91,11 +98,10 @@ export const draw = function(text, id) {
     const topPadding = conf.topPadding;
     const leftPadding = conf.leftPadding;
 
-    const colorScale = d3
+    const colorScale = scaleLinear()
-      .scaleLinear()
       .domain([0, categories.length])
       .range(['#00B9FA', '#F95002'])
-      .interpolate(d3.interpolateHcl);
+      .interpolate(interpolateHcl);
 
     makeGrid(leftPadding, topPadding, pageWidth, pageHeight);
     drawRects(tasks, gap, topPadding, leftPadding, barHeight, colorScale, pageWidth, pageHeight);
@@ -327,10 +333,9 @@ export const draw = function(text, id) {
   }
 
   function makeGrid(theSidePad, theTopPad, w, h) {
-    let xAxis = d3
+    let xAxis = axisBottom(timeScale)
-      .axisBottom(timeScale)
       .tickSize(-h + theTopPad + conf.gridLineStartPadding)
-      .tickFormat(d3.timeFormat(parser.yy.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'));
+      .tickFormat(timeFormat(parser.yy.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'));
 
     svg
       .append('g')

src/diagrams/git/gitGraphRenderer.js

@@ -1,4 +1,4 @@
-import * as d3 from 'd3';
+import { curveBasis, line, select } from 'd3';
 import _ from 'lodash';
 
 import db from './gitGraphAst';
@@ -54,10 +54,9 @@ function svgCreateDefs(svg) {
 }
 
 function svgDrawLine(svg, points, colorIdx, interpolate) {
-  const curve = interpolateToCurve(interpolate, d3.curveBasis);
+  const curve = interpolateToCurve(interpolate, curveBasis);
   const color = config.branchColors[colorIdx % config.branchColors.length];
-  const lineGen = d3
+  const lineGen = line()
-    .line()
     .x(function(d) {
       return Math.round(d.x);
     })
@@ -318,7 +317,7 @@ export const draw = function(txt, id, ver) {
       config.nodeLabel.width = '100%';
       config.nodeLabel.y = -1 * 2 * config.nodeRadius;
     }
-    const svg = d3.select(`[id="${id}"]`);
+    const svg = select(`[id="${id}"]`);
     svgCreateDefs(svg);
     branchNum = 1;
     for (let branch in branches) {

src/diagrams/info/infoRenderer.js

@@ -1,7 +1,7 @@
 /**
  * Created by knut on 14-12-11.
  */
-import * as d3 from 'd3';
+import { select } from 'd3';
 import db from './infoDb';
 import infoParser from './parser/info';
 import { logger } from '../../logger';
@@ -29,7 +29,7 @@ export const draw = (txt, id, ver) => {
     parser.parse(txt);
     logger.debug('Parsed info diagram');
     // Fetch the default direction, use TD if none was found
-    const svg = d3.select('#' + id);
+    const svg = select('#' + id);
 
     const g = svg.append('g');
 

src/diagrams/pie/pieRenderer.js

@@ -1,7 +1,7 @@
 /**
  * Created by AshishJ on 11-09-2019.
  */
-import * as d3 from 'd3';
+import { select, scaleOrdinal, schemeSet2, pie as d3pie, entries, arc } from 'd3';
 import pieData from './pieDb';
 import pieParser from './parser/pie';
 import { logger } from '../../logger';
@@ -55,8 +55,7 @@ export const draw = (txt, id) => {
 
     var radius = Math.min(width, height) / 2 - margin;
 
-    var svg = d3
+    var svg = select('#' + id)
-      .select('#' + id)
       .append('svg')
       .attr('width', width)
       .attr('height', height)
@@ -71,20 +70,18 @@ export const draw = (txt, id) => {
     logger.info(data);
 
     // set the color scale
-    var color = d3
+    var color = scaleOrdinal()
-      .scaleOrdinal()
       .domain(data)
-      .range(d3.schemeSet2);
+      .range(schemeSet2);
 
     // Compute the position of each group on the pie:
-    var pie = d3.pie().value(function(d) {
+    var pie = d3pie().value(function(d) {
       return d.value;
     });
-    var dataReady = pie(d3.entries(data));
+    var dataReady = pie(entries(data));
 
     // shape helper to build arcs:
-    var arcGenerator = d3
+    var arcGenerator = arc()
-      .arc()
       .innerRadius(0)
       .outerRadius(radius);
 

src/diagrams/sequence/sequenceRenderer.js

@@ -1,5 +1,4 @@
-import * as d3 from 'd3';
+import { select, selectAll } from 'd3';
-
 import svgDraw from './svgDraw';
 import { logger } from '../../logger';
 import { parser } from './parser/sequenceDiagram';
@@ -518,7 +517,7 @@ export const calculateTextWidth = function(text, fontSize, fontFamily) {
   const lines = text.split(common.lineBreakRegex);
   let maxWidth = 0;
 
-  const body = d3.select('body');
+  const body = select('body');
   // We don'y want to leak DOM elements - if a removal operation isn't available
   // for any reason, do not continue.
   if (!body.remove) {
@@ -556,7 +555,7 @@ export const draw = function(text, id) {
   parser.parse(text + '\n');
 
   bounds.init();
-  const diagram = d3.select(`[id="${id}"]`);
+  const diagram = select(`[id="${id}"]`);
 
   let startx;
   let stopx;
@@ -768,7 +767,7 @@ export const draw = function(text, id) {
 
   // Adjust line height of actor lines now that the height of the diagram is known
   logger.debug('For line height fix Querying: #' + id + ' .actor-line');
-  const actorLines = d3.selectAll('#' + id + ' .actor-line');
+  const actorLines = selectAll('#' + id + ' .actor-line');
   actorLines.attr('y2', box.stopy);
 
   let height = box.stopy - box.starty + 2 * conf.diagramMarginY;

src/diagrams/state/shapes.js

@@ -1,4 +1,4 @@
-import * as d3 from 'd3';
+import { line, curveBasis } from 'd3';
 import idCache from './id-cache.js';
 import stateDb from './stateDb';
 import utils from '../../utils';
@@ -413,15 +413,14 @@ export const drawEdge = function(elem, path, relation) {
   const lineData = path.points;
 
   // This is the accessor function we talked about above
-  const lineFunction = d3
+  const lineFunction = line()
-    .line()
     .x(function(d) {
       return d.x;
     })
     .y(function(d) {
       return d.y;
     })
-    .curve(d3.curveBasis);
+    .curve(curveBasis);
 
   const svgPath = elem
     .append('path')

src/diagrams/state/stateRenderer-v2.js

@@ -1,5 +1,5 @@
 import graphlib from 'graphlib';
-import * as d3 from 'd3';
+import { select } from 'd3';
 import stateDb from './stateDb';
 import state from './parser/stateDiagram';
 import { getConfig } from '../../config';
@@ -245,10 +245,10 @@ export const draw = function(text, id) {
   setupNode(g, undefined, stateDb.getRootDocV2(), true);
 
   // Set up an SVG group so that we can translate the final graph.
-  const svg = d3.select(`[id="${id}"]`);
+  const svg = select(`[id="${id}"]`);
 
   // Run the renderer. This is what draws the final graph.
-  const element = d3.select('#' + id + ' g');
+  const element = select('#' + id + ' g');
   render(element, g, ['barb'], 'statediagram', id);
 
   const padding = 8;

src/diagrams/state/stateRenderer.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';
@@ -49,7 +49,7 @@ export const draw = function(text, id) {
   logger.debug('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
@@ -239,7 +239,7 @@ const renderDoc = (doc, diagram, parentId, altBkg) => {
   graph.nodes().forEach(function(v) {
     if (typeof v !== 'undefined' && typeof graph.node(v) !== 'undefined') {
       logger.warn('Node ' + v + ': ' + JSON.stringify(graph.node(v)));
-      d3.select('#' + svgElem.id + ' #' + v).attr(
+      select('#' + svgElem.id + ' #' + v).attr(
         'transform',
         'translate(' +
           (graph.node(v).x - graph.node(v).width / 2) +
@@ -249,7 +249,7 @@ const renderDoc = (doc, diagram, parentId, altBkg) => {
             graph.node(v).height / 2) +
           ' )'
       );
-      d3.select('#' + svgElem.id + ' #' + v).attr(
+      select('#' + svgElem.id + ' #' + v).attr(
         'data-x-shift',
         graph.node(v).x - graph.node(v).width / 2
       );

src/diagrams/user-journey/journeyRenderer.js

@@ -1,5 +1,4 @@
-import * as d3 from 'd3';
+import { select } from 'd3';
-
 import { parser } from './parser/journey';
 import journeyDb from './journeyDb';
 import svgDraw from './svgDraw';
@@ -85,7 +84,7 @@ export const draw = function(text, id) {
   parser.parse(text + '\n');
 
   bounds.init();
-  const diagram = d3.select('#' + id);
+  const diagram = select('#' + id);
   diagram.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');
 
   svgDraw.initGraphics(diagram);

src/diagrams/user-journey/svgDraw.js

@@ -1,4 +1,4 @@
-import * as d3 from 'd3';
+import { arc as d3arc } from 'd3';
 
 export const drawRect = function(elem, rectData) {
   const rectElem = elem.append('rect');
@@ -53,8 +53,7 @@ export const drawFace = function(element, faceData) {
     .attr('stroke', '#666');
 
   function smile(face) {
-    const arc = d3
+    const arc = d3arc()
-      .arc()
       .startAngle(Math.PI / 2)
       .endAngle(3 * (Math.PI / 2))
       .innerRadius(radius / 2)
@@ -67,8 +66,7 @@ export const drawFace = function(element, faceData) {
   }
 
   function sad(face) {
-    const arc = d3
+    const arc = d3arc()
-      .arc()
       .startAngle((3 * Math.PI) / 2)
       .endAngle(5 * (Math.PI / 2))
       .innerRadius(radius / 2)

src/mermaidAPI.js

@@ -10,7 +10,7 @@
  *
  * @name mermaidAPI
  */
-import * as d3 from 'd3';
+import { select } from 'd3';
 import scope from 'scope-css';
 import pkg from '../package.json';
 import { setConfig, getConfig } from './config';
@@ -677,7 +677,7 @@ const render = function(id, _txt, cb, container) {
   if (typeof container !== 'undefined') {
     container.innerHTML = '';
 
-    d3.select(container)
+    select(container)
       .append('div')
       .attr('id', 'd' + id)
       .attr('style', 'font-family: ' + config.fontFamily)
@@ -696,7 +696,7 @@ const render = function(id, _txt, cb, container) {
       element.innerHTML = '';
     }
 
-    d3.select('body')
+    select('body')
       .append('div')
       .attr('id', 'd' + id)
       .append('svg')
@@ -709,7 +709,7 @@ const render = function(id, _txt, cb, container) {
   window.txt = txt;
   txt = encodeEntities(txt);
 
-  const element = d3.select('#d' + id).node();
+  const element = select('#d' + id).node();
   const graphType = utils.detectType(txt);
 
   // insert inline style into svg
@@ -831,7 +831,7 @@ const render = function(id, _txt, cb, container) {
       break;
   }
 
-  d3.select(`[id="${id}"]`)
+  select(`[id="${id}"]`)
     .selectAll('foreignobject > *')
     .attr('xmlns', 'http://www.w3.org/1999/xhtml');
 
@@ -847,7 +847,7 @@ const render = function(id, _txt, cb, container) {
   // }
 
   // Fix for when the base tag is used
-  let svgCode = d3.select('#d' + id).node().innerHTML;
+  let svgCode = select('#d' + id).node().innerHTML;
 
   if (!config.arrowMarkerAbsolute || config.arrowMarkerAbsolute === 'false') {
     svgCode = svgCode.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#', 'g');
@@ -873,9 +873,9 @@ const render = function(id, _txt, cb, container) {
     logger.debug('CB = undefined!');
   }
 
-  const node = d3.select('#d' + id).node();
+  const node = select('#d' + id).node();
   if (node !== null && typeof node.remove === 'function') {
-    d3.select('#d' + id)
+    select('#d' + id)
       .node()
       .remove();
   }

src/utils.js

@@ -1,7 +1,34 @@
-import * as d3 from 'd3';
+import {
+  curveBasis,
+  curveBasisClosed,
+  curveBasisOpen,
+  curveLinear,
+  curveLinearClosed,
+  curveMonotoneX,
+  curveMonotoneY,
+  curveNatural,
+  curveStep,
+  curveStepAfter,
+  curveStepBefore
+} from 'd3';
 import { logger } from './logger';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 
+// Effectively an enum of the supported curve types, accessible by name
+const d3CurveTypes = {
+  curveBasis: curveBasis,
+  curveBasisClosed: curveBasisClosed,
+  curveBasisOpen: curveBasisOpen,
+  curveLinear: curveLinear,
+  curveLinearClosed: curveLinearClosed,
+  curveMonotoneX: curveMonotoneX,
+  curveMonotoneY: curveMonotoneY,
+  curveNatural: curveNatural,
+  curveStep: curveStep,
+  curveStepAfter: curveStepAfter,
+  curveStepBefore: curveStepBefore
+};
+
 /**
  * @function detectType
  * Detects the type of the graph text.
@@ -85,7 +112,7 @@ export const interpolateToCurve = (interpolate, defaultCurve) => {
     return defaultCurve;
   }
   const curveName = `curve${interpolate.charAt(0).toUpperCase() + interpolate.slice(1)}`;
-  return d3[curveName] || defaultCurve;
+  return d3CurveTypes[curveName] || defaultCurve;
 };
 
 export const formatUrl = (linkStr, config) => {