Merge pull request #5400 from plotly/make-d3-v3-internal

Make d3 internal and stop exporting d3-v3 to the API

devtools/image_viewer/viewer.js

@@ -1,7 +1,7 @@
 var fs = require('fs');
 var path = require('path');
 
-var d3 = require('@plotly/d3');
+var d3Json = require('../../test/strict_d3').json;
 
 var $plotlist = document.getElementById('plot-list');
 var $toggles = document.getElementById('plot-toggles');
@@ -55,7 +55,7 @@ function createButton(imageName) {
     button.style.cursor = 'pointer';
 
     button.addEventListener('click', function() {
-        d3.json(dirMocks + imageName + '.json', function(err, mock) {
+        d3Json(dirMocks + imageName + '.json', function(err, mock) {
             $toggles.style.display = 'block';
 
             $images.style.display = 'block';

devtools/test_dashboard/devtools.js

@@ -6,7 +6,8 @@ var Fuse = require('fuse.js/dist/fuse.common.js');
 var mocks = require('../../build/test_dashboard_mocks.json');
 var credentials = require('../../build/credentials.json');
 var Lib = require('@src/lib');
-var d3 = Plotly.d3;
+var d3 = require('../../test/strict_d3');
+var d3Json = d3.json;
 
 require('./perf');
 
@@ -59,7 +60,7 @@ var Tabs = {
     plotMock: function(mockName, id) {
         var mockURL = '/test/image/mocks/' + mockName + '.json';
 
-        d3.json(mockURL, function(err, fig) {
+        d3Json(mockURL, function(err, fig) {
             Plotly.newPlot(Tabs.fresh(id), fig);
 
             console.warn('Plotting:', mockURL);
@@ -69,7 +70,7 @@ var Tabs = {
     getMock: function(mockName, callback) {
         var mockURL = '/test/image/mocks/' + mockName + '.json';
 
-        d3.json(mockURL, function(err, fig) {
+        d3Json(mockURL, function(err, fig) {
             if(typeof callback !== 'function') {
                 window.mock = fig;
             } else {

src/core.js

@@ -79,6 +79,3 @@ exports.Fx = require('./components/fx');
 exports.Snapshot = require('./snapshot');
 exports.PlotSchema = require('./plot_api/plot_schema');
 exports.Queue = require('./lib/queue');
-
-// export d3 used in the bundle
-exports.d3 = require('@plotly/d3');

tasks/util/constants.js

@@ -5,6 +5,7 @@ var pathToRoot = path.join(__dirname, '../../');
 var pathToSrc = path.join(pathToRoot, 'src/');
 var pathToLib = path.join(pathToRoot, 'lib/');
 var pathToImageTest = path.join(pathToRoot, 'test/image');
+var pathToStrictD3Module = path.join(pathToRoot, 'test/strict-d3.js');
 var pathToDist = path.join(pathToRoot, 'dist/');
 var pathToBuild = path.join(pathToRoot, 'build/');
 
@@ -77,6 +78,8 @@ module.exports = {
     pathToTestImagesDiff: path.join(pathToBuild, 'test_images_diff/'),
     pathToTestImagesDiffList: path.join(pathToBuild, 'list_of_incorrect_images.txt'),
 
+    pathToStrictD3Module: pathToStrictD3Module,
+
     pathToJasmineTests: path.join(pathToRoot, 'test/jasmine/tests'),
     pathToJasmineBundleTests: path.join(pathToRoot, 'test/jasmine/bundle_tests'),
     pathToRequireJS: path.join(pathToRoot, 'node_modules', 'requirejs', 'require.js'),

tasks/util/strict_d3.js

@@ -1,11 +1,6 @@
-var path = require('path');
 var transformTools = require('browserify-transform-tools');
-var constants = require('./constants');
+var pathToStrictD3Module = require('./constants').pathToStrictD3Module;
 
-var pathToStrictD3Module = path.join(
-    constants.pathToImageTest,
-    'strict-d3.js'
-);
 /**
  * Transform `require('@plotly/d3')` expressions to `require(/path/to/strict-d3.js)`
  */

tasks/util/watchified_bundle.js

@@ -6,7 +6,6 @@ var prettySize = require('prettysize');
 
 var constants = require('./constants');
 var common = require('./common');
-var strictD3 = require('./strict_d3');
 
 /**
  * Make a plotly.js browserify bundle function watched by watchify.
@@ -22,7 +21,7 @@ module.exports = function makeWatchifiedBundle(onFirstBundleCallback) {
     var b = browserify(constants.pathToPlotlyIndex, {
         debug: true,
         standalone: 'Plotly',
-        transform: [strictD3],
+        transform: [],
         cache: {},
         packageCache: {},
         plugin: [watchify]

test/jasmine/assets/check_component.js

@@ -1,4 +1,4 @@
-var d3 = require('@plotly/d3');
+var d3SelectAll = require('../../strict-d3').selectAll;
 
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
@@ -44,7 +44,7 @@ module.exports = function checkComponent(Plotly) {
         afterEach(destroyGraphDiv);
 
         it('should graph scatter traces with calendar attributes', function() {
-            var nodes = d3.selectAll('g.trace.scatter');
+            var nodes = d3SelectAll('g.trace.scatter');
 
             expect(nodes.size()).toEqual(1);
 
@@ -55,7 +55,7 @@ module.exports = function checkComponent(Plotly) {
         });
 
         it('should graph bar traces with calendar attributes', function() {
-            var nodes = d3.selectAll('g.trace.bars');
+            var nodes = d3SelectAll('g.trace.bars');
 
             expect(nodes.size()).toEqual(1);
             expect(gd._fullData[1].xcalendar).toBe('gregorian');

test/jasmine/assets/check_texttemplate.js

@@ -4,6 +4,8 @@ var Plotly = require('@lib/index');
 var Registry = require('@src/registry');
 
 var Lib = require('@src/lib');
+var d3Select = require('../../strict-d3').select;
+var d3SelectAll = require('../../strict-d3').selectAll;
 var failTest = require('../assets/fail_test');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
@@ -127,10 +129,10 @@ module.exports = function checkTextTemplate(mock, selector, tests, skipExtra) {
                 dataCopy[0].texttemplate = test[0];
                 Plotly.newPlot(gd, dataCopy, Lib.extendDeep({}, layout))
                     .then(function() {
-                        var pts = Plotly.d3.selectAll(selector);
+                        var pts = d3SelectAll(selector);
                         expect(pts.size()).toBe(test[1].length);
                         pts.each(function() {
-                            expect(test[1]).toContain(Plotly.d3.select(this).text());
+                            expect(test[1]).toContain(d3Select(this).text());
                         });
                     })
                     .catch(failTest)

test/jasmine/assets/check_transitions.js

@@ -2,7 +2,9 @@
 
 var Plotly = require('@lib/index');
 var Lib = require('@src/lib');
-var d3 = require('@plotly/d3');
+var d3Timer = require('../../strict-d3').timer;
+var d3Select = require('../../strict-d3').select;
+var d3SelectAll = require('../../strict-d3').selectAll;
 var delay = require('./delay.js');
 
 var reNumbers = /([\d\.]+)/gm;
@@ -19,7 +21,7 @@ function clockTick(currentNow, milliseconds) {
     Date.now = function() {
         return currentNow + milliseconds;
     };
-    d3.timer.flush();
+    d3Timer.flush();
 }
 
 // Using the methodology from http://eng.wealthfront.com/2017/10/26/testing-d3-transitions/
@@ -87,11 +89,11 @@ module.exports = function checkTransition(gd, mock, animateOpts, transitionOpts,
 function assert(test) {
     var msg = 'at ' + test[0] + 'ms, selection ' + test[1] + ' has ' + test[3];
     var cur = [];
-    d3.selectAll(test[1]).each(function(d, i) {
+    d3SelectAll(test[1]).each(function(d, i) {
         if(test[2] === 'style') cur[i] = this.style[test[3]];
-        else if(test[2] === 'attr') cur[i] = d3.select(this).attr(test[3]);
+        else if(test[2] === 'attr') cur[i] = d3Select(this).attr(test[3]);
         else if(test[2] === 'datum') {
-            cur[i] = d3.select(this).datum()[test[3]];
+            cur[i] = d3Select(this).datum()[test[3]];
         }
     });
     switch(test[3]) {

test/jasmine/assets/custom_assertions.js

@@ -1,16 +1,17 @@
 'use strict';
 
-var d3 = require('@plotly/d3');
+var d3Select = require('../../strict-d3').select;
+var d3SelectAll = require('../../strict-d3').selectAll;
 var negateIf = require('./negate_if');
 
 exports.assertDims = function(dims) {
-    var traces = d3.selectAll('.trace');
+    var traces = d3SelectAll('.trace');
 
     expect(traces.size())
         .toEqual(dims.length, 'to have correct number of traces');
 
     traces.each(function(_, i) {
-        var trace = d3.select(this);
+        var trace = d3Select(this);
         var points = trace.selectAll('.point');
 
         expect(points.size())
@@ -23,15 +24,15 @@ exports.assertStyle = function(dims, color, opacity) {
         return a + b;
     });
 
-    var traces = d3.selectAll('.trace');
+    var traces = d3SelectAll('.trace');
     expect(traces.size())
         .toEqual(dims.length, 'to have correct number of traces');
 
-    expect(d3.selectAll('.point').size())
+    expect(d3SelectAll('.point').size())
         .toEqual(N, 'to have correct total number of points');
 
     traces.each(function(_, i) {
-        var trace = d3.select(this);
+        var trace = d3Select(this);
         var points = trace.selectAll('.point');
 
         expect(points.size())
@@ -72,7 +73,7 @@ function getLabelContent(label) {
     }
 
     if(lines.size()) {
-        lines.each(function() { fill(d3.select(this)); });
+        lines.each(function() { fill(d3Select(this)); });
     } else {
         fill(label);
     }
@@ -88,7 +89,7 @@ function assertLabelContent(label, expectation, msg) {
 }
 
 function count(selector) {
-    return d3.selectAll(selector).size();
+    return d3SelectAll(selector).size();
 }
 
 /**
@@ -115,7 +116,7 @@ exports.assertHoverLabelContent = function(expectation, msg) {
     var reRotate = /(\brotate\(.*?\);?)/;
 
     if(ptCnt === 1) {
-        var g = d3.select(ptSelector);
+        var g = d3Select(ptSelector);
         var numsSel = g.select('text.nums');
         var nameSel = g.select('text.name');
 
@@ -142,8 +143,8 @@ exports.assertHoverLabelContent = function(expectation, msg) {
                 order: (expectation.hOrder || expectation.vOrder || []).indexOf(i)
             };
         });
-        d3.selectAll(ptSelector).each(function(_, i) {
-            var g = d3.select(this);
+        d3SelectAll(ptSelector).each(function(_, i) {
+            var g = d3Select(this);
             var numsSel = g.select('text.nums');
             var nameSel = g.select('text.name');
 
@@ -201,7 +202,7 @@ exports.assertHoverLabelContent = function(expectation, msg) {
 
     if(axCnt) {
         assertLabelContent(
-            d3.select(axSelector + '> text'),
+            d3Select(axSelector + '> text'),
             expectation.axis,
             axMsg
         );
@@ -222,7 +223,7 @@ exports.assertClip = function(sel, isClipped, size, msg) {
     expect(sel.size()).toBe(size, msg + ' clip path (selection size)');
 
     sel.each(function(d, i) {
-        var clipPath = d3.select(this).attr('clip-path');
+        var clipPath = d3Select(this).attr('clip-path');
 
         if(isClipped) {
             expect(String(clipPath).substr(0, 5))
@@ -239,16 +240,16 @@ exports.assertNodeDisplay = function(sel, expectation, msg) {
         .toBe(expectation.length, msg + ' display (selection size)');
 
     sel.each(function(d, i) {
-        expect(d3.select(this).attr('display'))
+        expect(d3Select(this).attr('display'))
             .toBe(expectation[i], msg + ' display ' + '(item ' + i + ')');
     });
 };
 
 exports.checkTicks = function(axLetter, vals, msg) {
-    var selection = d3.selectAll('.' + axLetter + 'tick text');
+    var selection = d3SelectAll('.' + axLetter + 'tick text');
     expect(selection.size()).toBe(vals.length);
     selection.each(function(d, i) {
-        expect(d3.select(this).text()).toBe(vals[i], msg + ': ' + i);
+        expect(d3Select(this).text()).toBe(vals[i], msg + ': ' + i);
     });
 };
 
@@ -294,7 +295,7 @@ exports.assertPlotSize = function(opts, msg) {
     var widthLessThan = opts.widthLessThan;
     var heightLessThan = opts.heightLessThan;
 
-    var plotBB = d3.select('.plotclip > rect').node().getBoundingClientRect();
+    var plotBB = d3Select('.plotclip > rect').node().getBoundingClientRect();
     var actualWidth = plotBB.width;
     var actualHeight = plotBB.height;
 

test/jasmine/assets/domain_ref/components.js → test/jasmine/assets/domain_ref_components.js

@@ -10,18 +10,19 @@
 // promise is followed by .then(done, done.fail)
 'use strict';
 
-var Plotly = require('../../../../lib/index');
-var d3 = require('@plotly/d3');
-var pixelCalc = require('../../assets/pixel_calc');
-var getSVGElemScreenBBox = require('../../assets/get_svg_elem_screen_bbox');
-// var SVGTools = require('../../assets/svg_tools');
-var Lib = require('../../../../src/lib');
-var Axes = require('../../../../src/plots/cartesian/axes');
-var axisIds = require('../../../../src/plots/cartesian/axis_ids');
+var Plotly = require('@lib/index');
+var d3Select = require('../../strict-d3').select;
+var d3SelectAll = require('../../strict-d3').selectAll;
+var pixelCalc = require('../assets/pixel_calc');
+var getSVGElemScreenBBox = require('../assets/get_svg_elem_screen_bbox');
+// var SVGTools = require('../assets/svg_tools');
+var Lib = require('@src/lib');
+var Axes = require('@src/plots/cartesian/axes');
+var axisIds = require('@src/plots/cartesian/axis_ids');
 var testImage = 'https://images.plot.ly/language-icons/api-home/js-logo.png';
 var iterable = require('extra-iterable');
 
-var testMock = require('./domain_ref_base.json');
+var testMock = require('../assets/domain_ref_base.json');
 
 // NOTE: this tolerance is in pixels
 var EQUALITY_TOLERANCE = 1e-2;
@@ -116,7 +117,7 @@ var xAnchors = ['left', 'center', 'right'];
 var yAnchors = ['top', 'middle', 'bottom'];
 // this color chosen so it can easily be found with d3
 // NOTE: for images color cannot be set but it will be the only image in the
-// plot so you can use d3.select('g image').node()
+// plot so you can use d3Select('g image').node()
 var aroColor = 'rgb(50, 100, 150)';
 
 // acts on an Object representing a aro which could be a line or a rect
@@ -461,7 +462,7 @@ function findAROByColor(color, id, type, colorAttribute) {
     type = (type === undefined) ? 'path' : type;
     colorAttribute = (colorAttribute === undefined) ? 'stroke' : colorAttribute;
     var selector = id + type;
-    var ret = d3.selectAll(selector).filter(function() {
+    var ret = d3SelectAll(selector).filter(function() {
         return this.style[colorAttribute] === color;
     }).node();
     return ret;
@@ -470,7 +471,7 @@ function findAROByColor(color, id, type, colorAttribute) {
 function findImage(id) {
     id = (id === undefined) ? '' : id + ' ';
     var selector = id + 'g image';
-    var ret = d3.select(selector).node();
+    var ret = d3Select(selector).node();
     return ret;
 }
 

test/jasmine/assets/get_bbox.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var d3 = require('@plotly/d3');
+var d3Select = require('../../strict-d3').select;
 
 var ATTRS = ['x', 'y', 'width', 'height'];
 
@@ -9,7 +9,7 @@ var ATTRS = ['x', 'y', 'width', 'height'];
 module.exports = function getBBox(element) {
     var elementBBox = element.getBBox();
 
-    var s = d3.select(element);
+    var s = d3Select(element);
     var clipPathAttr = s.attr('clip-path');
 
     if(!clipPathAttr) return elementBBox;
@@ -22,15 +22,15 @@ module.exports = function getBBox(element) {
 };
 
 function getClipBBox(clipPathId) {
-    var clipPath = d3.select('#' + clipPathId);
+    var clipPath = d3Select('#' + clipPathId);
     var clipBBox;
 
     try {
         // this line throws an error in FF (38 and 45 at least)
         clipBBox = clipPath.node().getBBox();
     } catch(e) {
         // use DOM attributes as fallback
-        var path = d3.select(clipPath.node().firstChild);
+        var path = d3Select(clipPath.node().firstChild);
 
         clipBBox = {};