mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Do explicit imports for d3 instead of wildcards

This commit is contained in:
Adrian Hall 2020-05-11 07:10:04 +01:00
parent 8ef3aee7e7
commit 053a86c0d4
20 changed files with 136 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/dagre-wrapper/edges.js
View File

@ -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
.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')

13
src/diagrams/class/classDb.js
View File

@ -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);
});
};

6
src/diagrams/class/classRenderer.js
View File

@ -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) +

17
src/diagrams/class/svgDraw.js
View File

@ -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')

9
src/diagrams/er/erRenderer.js
View File

@ -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
.line()
const lineFunction = 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);

13
src/diagrams/flowchart/flowDb.js
View File

@ -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
.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) {
@ -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);
});
};

18
src/diagrams/flowchart/flowRenderer-v2.js
View File

@ -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(' '));

20
src/diagrams/flowchart/flowRenderer.js
View File

@ -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(' '));

31
src/diagrams/gantt/ganttRenderer.js
View File

@ -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
.scaleTime()
const timeScale = 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
.scaleLinear()
const colorScale = 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
.axisBottom(timeScale)
let xAxis = 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')

9
src/diagrams/git/gitGraphRenderer.js
View File

@ -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
.line()
const lineGen = 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) {

4
src/diagrams/info/infoRenderer.js
View File

@ -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');

17
src/diagrams/pie/pieRenderer.js
View File

@ -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
.select('#' + id)
var svg = 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
.scaleOrdinal()
var color = 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
.arc()
var arcGenerator = arc()
.innerRadius(0)
.outerRadius(radius);

9
src/diagrams/sequence/sequenceRenderer.js
View File

@ -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;

7
src/diagrams/state/shapes.js
View File

@ -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
.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')

6
src/diagrams/state/stateRenderer-v2.js
View File

@ -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;

8
src/diagrams/state/stateRenderer.js
View File

@ -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
);

5
src/diagrams/user-journey/journeyRenderer.js
View File

@ -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);

8
src/diagrams/user-journey/svgDraw.js
View File

@ -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
.arc()
const arc = d3arc()
.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
.arc()
const arc = d3arc()
.startAngle((3 * Math.PI) / 2)
.endAngle(5 * (Math.PI / 2))
.innerRadius(radius / 2)

16
src/mermaidAPI.js
View File

@ -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();
}

31
src/utils.js
View File

@ -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) => {