feat: isolate d3js compatility layers

rollup.config.js

@@ -13,6 +13,7 @@ const licensePlugin = license({
 });
 
 const d3Modules = {
+    'd3': 'd3',
     'd3-array': 'd3',
     'd3-axis': 'd3',
     'd3-brush': 'd3',

src/base/base-mixin.js

@@ -11,7 +11,7 @@ import {logger} from '../core/logger';
 import {printers} from '../core/printers';
 import {InvalidStateException} from '../core/invalid-state-exception';
 import {BadArgumentException} from '../core/bad-argument-exception';
-import {adaptHandler} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 const _defaultFilterHandler = (dimension, filters) => {
     if (filters.length === 0) {
@@ -723,7 +723,7 @@ export class BaseMixin {
             .attr('tabindex', 0);
 
         if (onClickFunction) {
-            tabElements.on('keydown', adaptHandler((d, event) => {
+            tabElements.on('keydown', d3compat.eventHandler((d, event) => {
                 // trigger only if d is an object undestood by KeyAccessor()
                 if (event.keyCode === 13 && typeof d === 'object') {
                     onClickFunction.call(this, d, ...onClickArgs)

src/base/bubble-mixin.js

@@ -4,7 +4,7 @@ import { scaleLinear } from 'd3-scale';
 import {ColorMixin} from './color-mixin';
 import {transition} from '../core/core';
 import {events} from '../core/events';
-import {adaptHandler} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 /**
  * This Mixin provides reusable functionalities for any chart that needs to visualize data using bubbles.
@@ -156,7 +156,7 @@ export const BubbleMixin = Base => class extends ColorMixin(Base) {
                 label = bubbleGEnter.append('text')
                         .attr('text-anchor', 'middle')
                         .attr('dy', '.3em')
-                        .on('click', adaptHandler(d => this.onClick(d)));
+                        .on('click', d3compat.eventHandler(d => this.onClick(d)));
             }
 
             label

src/base/coordinate-grid-mixin.js

@@ -12,7 +12,7 @@ import {optionalTransition, transition} from '../core/core';
 import {units} from '../core/units';
 import {constants} from '../core/constants';
 import {utils} from '../core/utils';
-import {adaptHandler} from '../core/d3compat';
+import {d3compat} from '../core/config';
 import {logger} from '../core/logger';
 import {filters} from '../core/filters';
 import {events} from '../core/events';
@@ -78,7 +78,7 @@ export class CoordinateGridMixin extends ColorMixin(MarginMixin) {
         this._zoomScale = [1, Infinity];
         this._zoomOutRestrict = true;
 
-        this._zoom = zoom().on('zoom', adaptHandler((d, evt) => this._onZoom(evt)));
+        this._zoom = zoom().on('zoom', d3compat.eventHandler((d, evt) => this._onZoom(evt)));
         this._nullZoom = zoom().on('zoom', null);
         this._hasBeenMouseZoomable = false;
         this._ignoreZoomEvents = false; // ignore when carrying out programmatic zoom operations
@@ -969,7 +969,7 @@ export class CoordinateGridMixin extends ColorMixin(MarginMixin) {
 
     renderBrush (g, doTransition) {
         if (this._brushOn) {
-            this._brush.on('start brush end', adaptHandler((d, evt) => this._brushing(evt)));
+            this._brush.on('start brush end', d3compat.eventHandler((d, evt) => this._brushing(evt)));
 
             // To retrieve selection we need self._gBrush
             this._gBrush = g.append('g')

src/charts/bar-chart.js

@@ -5,7 +5,7 @@ import {transition} from '../core/core';
 import {constants} from '../core/constants';
 import {logger} from '../core/logger';
 import {pluck, utils} from '../core/utils';
-import {adaptHandler} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 const MIN_BAR_WIDTH = 1;
 const DEFAULT_GAP_BETWEEN_BARS = 2;
@@ -145,7 +145,7 @@ export class BarChart extends StackMixin {
             .merge(labels);
 
         if (this.isOrdinal()) {
-            labelsEnterUpdate.on('click', adaptHandler(d => this.onClick(d)));
+            labelsEnterUpdate.on('click', d3compat.eventHandler(d => this.onClick(d)));
             labelsEnterUpdate.attr('cursor', 'pointer');
         }
 
@@ -190,7 +190,7 @@ export class BarChart extends StackMixin {
         }
 
         if (this.isOrdinal()) {
-            barsEnterUpdate.on('click', adaptHandler(d => this.onClick(d)));
+            barsEnterUpdate.on('click', d3compat.eventHandler(d => this.onClick(d)));
         }
 
         if (this._keyboardAccessible) {

src/charts/box-plot.js

@@ -7,7 +7,7 @@ import {CoordinateGridMixin} from '../base/coordinate-grid-mixin';
 import {transition} from '../core/core';
 import {units} from '../core/units';
 import {utils} from '../core/utils';
-import {adaptHandler} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 // Returns a function to compute the interquartile range.
 function defaultWhiskersIQR (k) {
@@ -198,7 +198,7 @@ export class BoxPlot extends CoordinateGridMixin {
             .classed('dc-tabbable', this._keyboardAccessible)
             .attr('transform', (d, i) => this._boxTransform(d, i))
             .call(this._box)
-            .on('click', adaptHandler(d => {
+            .on('click', d3compat.eventHandler(d => {
                 this.filter(this.keyAccessor()(d));
                 this.redrawGroup();
             }))

src/charts/bubble-chart.js

@@ -1,7 +1,7 @@
 import {BubbleMixin} from '../base/bubble-mixin';
 import {CoordinateGridMixin} from '../base/coordinate-grid-mixin';
 import {transition} from '../core/core';
-import {adaptHandler} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 /**
  * A concrete implementation of a general purpose bubble chart that allows data visualization using the
@@ -74,7 +74,7 @@ export class BubbleChart extends BubbleMixin(CoordinateGridMixin) {
             .attr('class', this.BUBBLE_NODE_CLASS)
             .attr('transform', d => this._bubbleLocator(d))
             .append('circle').attr('class', (d, i) => `${this.BUBBLE_CLASS} _${i}`)
-            .on('click', adaptHandler(d => this.onClick(d)))
+            .on('click', d3compat.eventHandler(d => this.onClick(d)))
             .classed('dc-tabbable', this._keyboardAccessible)
             .attr('fill', this.getColor)
             .attr('r', 0);

src/charts/bubble-overlay.js

@@ -3,7 +3,7 @@ import {BubbleMixin} from '../base/bubble-mixin';
 import {transition} from '../core/core';
 import {constants} from '../core/constants';
 import {utils} from '../core/utils';
-import {adaptHandler, d3compatPointer} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 const BUBBLE_OVERLAY_CLASS = 'bubble-overlay';
 const BUBBLE_NODE_CLASS = 'node';
@@ -115,7 +115,7 @@ export class BubbleOverlay extends BubbleMixin(BaseMixin) {
                     .classed('dc-tabbable', this._keyboardAccessible)
                     .attr('r', 0)
                     .attr('fill', this.getColor)
-                    .on('click', adaptHandler(d => this.onClick(d)));
+                    .on('click', d3compat.eventHandler(d => this.onClick(d)));
             }
 
             if (this._keyboardAccessible) {
@@ -200,8 +200,8 @@ export class BubbleOverlay extends BubbleMixin(BaseMixin) {
                 .append('rect')
                 .attr('width', this.width())
                 .attr('height', this.height())
-                .on('mousemove', adaptHandler((d, evt) => {
-                    const position = d3compatPointer(evt, debugG.node());
+                .on('mousemove', d3compat.eventHandler((d, evt) => {
+                    const position = d3compat.pointer(evt, debugG.node());
                     const msg = `${position[0]}, ${position[1]}`;
                     debugText.text(msg);
                 }));

src/charts/cbox-menu.js

@@ -3,7 +3,7 @@ import {select} from 'd3-selection';
 import {events} from '../core/events';
 import {BaseMixin} from '../base/base-mixin';
 import {utils} from '../core/utils'
-import {adaptHandler} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 const GROUP_CSS_CLASS = 'dc-cbox-group';
 const ITEM_CSS_CLASS = 'dc-cbox-item';
@@ -121,7 +121,7 @@ export class CboxMenu extends BaseMixin {
                 .append('input')
                 .attr('type', 'reset')
                 .text(this._promptText)
-                .on('click', adaptHandler(function (d, evt) {
+                .on('click', d3compat.eventHandler(function (d, evt) {
                     return chart._onChange(d, evt, this);
                 }));
         } else {
@@ -141,7 +141,7 @@ export class CboxMenu extends BaseMixin {
             .selectAll(`li.${ITEM_CSS_CLASS}`)
             .sort(this._order);
 
-        this._cbox.on('change', adaptHandler(function (d, evt) {
+        this._cbox.on('change', d3compat.eventHandler(function (d, evt) {
             return chart._onChange(d, evt, this);
         }));
         return options;

src/charts/data-grid.js

@@ -2,7 +2,7 @@ import {ascending} from 'd3-array';
 
 import {logger} from '../core/logger';
 import {BaseMixin} from '../base/base-mixin';
-import {compatNestHelper} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 const LABEL_CSS_CLASS = 'dc-grid-label';
 const ITEM_CSS_CLASS = 'dc-grid-item';
@@ -86,7 +86,7 @@ export class DataGrid extends BaseMixin {
             .sort((a, b) => this._order(this._sortBy(a), this._sortBy(b)))
             .slice(this._beginSlice, this._endSlice)
 
-        return compatNestHelper({
+        return d3compat.nester({
             key: this.section(),
             sortKeys: this._order,
             entries

src/charts/data-table.js

@@ -2,7 +2,7 @@ import {ascending} from 'd3-array';
 
 import {logger} from '../core/logger';
 import {BaseMixin} from '../base/base-mixin';
-import {compatNestHelper} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 const LABEL_CSS_CLASS = 'dc-table-label';
 const ROW_CSS_CLASS = 'dc-table-row';
@@ -176,7 +176,7 @@ export class DataTable extends BaseMixin {
 
         entries = entries.sort((a, b) => this._order(this._sortBy(a), this._sortBy(b))).slice(this._beginSlice, this._endSlice)
 
-        return compatNestHelper({
+        return d3compat.nester({
             key: this.section(),
             sortKeys: this._order,
             entries

src/charts/geo-choropleth-chart.js

@@ -7,7 +7,7 @@ import {transition} from '../core/core';
 import {logger} from '../core/logger';
 import {events} from '../core/events';
 import {utils} from '../core/utils';
-import {adaptHandler} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 /**
  * The geo choropleth chart is designed as an easy way to create a crossfilter driven choropleth map
@@ -149,7 +149,7 @@ export class GeoChoroplethChart extends ColorMixin(BaseMixin) {
                 }
                 return 'none';
             })
-            .on('click', adaptHandler(d => this.onClick(d, layerIndex)));
+            .on('click', d3compat.eventHandler(d => this.onClick(d, layerIndex)));
 
         if (this._keyboardAccessible) {
             this._makeKeyboardAccessible(this.onClick, layerIndex);

src/charts/heatmap.js

@@ -7,7 +7,7 @@ import {filters} from '../core/filters';
 import {events} from '../core/events';
 import {ColorMixin} from '../base/color-mixin';
 import {MarginMixin} from '../base/margin-mixin';
-import {adaptHandler} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 const DEFAULT_BORDER_RADIUS = 6.75;
 
@@ -233,7 +233,7 @@ export class HeatMap extends ColorMixin(MarginMixin) {
             .attr('fill', 'white')
             .attr('x', (d, i) => cols(this.keyAccessor()(d, i)))
             .attr('y', (d, i) => rows(this.valueAccessor()(d, i)))
-            .on('click', adaptHandler(this.boxOnClick()));
+            .on('click', d3compat.eventHandler(this.boxOnClick()));
 
         if (this._keyboardAccessible) {
             this._makeKeyboardAccessible(this.boxOnClick);
@@ -270,7 +270,7 @@ export class HeatMap extends ColorMixin(MarginMixin) {
             .style('text-anchor', 'middle')
             .attr('y', this.effectiveHeight())
             .attr('dy', 12)
-            .on('click', adaptHandler(this.xAxisOnClick()))
+            .on('click', d3compat.eventHandler(this.xAxisOnClick()))
             .text(this.colsLabel())
             .merge(gColsText);
 
@@ -296,7 +296,7 @@ export class HeatMap extends ColorMixin(MarginMixin) {
             .attr('dx', -2)
             .attr('y', d => rows(d) + boxHeight / 2)
             .attr('dy', 6)
-            .on('click', adaptHandler(this.yAxisOnClick()))
+            .on('click', d3compat.eventHandler(this.yAxisOnClick()))
             .text(this.rowsLabel())
             .merge(gRowsText);
 

src/charts/html-legend.js

@@ -1,8 +1,7 @@
 import {select} from 'd3-selection';
-import {event} from 'd3-selection';
 
 import {pluck, utils} from '../core/utils';
-import {adaptHandler} from '../core/d3compat';
+import {d3compat} from '../core/config';
 import {constants} from '../core/constants';
 
 /**
@@ -55,9 +54,9 @@ export class HtmlLegend {
             .data(legendables).enter()
             .append('div')
             .classed(legendItemClassName, true)
-            .on('mouseover', adaptHandler(d => this._parent.legendHighlight(d)))
-            .on('mouseout', adaptHandler(d => this._parent.legendReset(d)))
-            .on('click', adaptHandler(d => this._parent.legendToggle(d)));
+            .on('mouseover', d3compat.eventHandler(d => this._parent.legendHighlight(d)))
+            .on('mouseout', d3compat.eventHandler(d => this._parent.legendReset(d)))
+            .on('click', d3compat.eventHandler(d => this._parent.legendToggle(d)));
 
         if (this._highlightSelected) {
             itemEnter.classed(constants.SELECTED_CLASS, d => filters.indexOf(d.name) !== -1);
@@ -209,7 +208,7 @@ export class HtmlLegend {
             .attr('tabindex', 0);
 
         tabElements
-            .on('keydown', d => {
+            .on('keydown', d3compat.eventHandler((d, event) => {
                 // trigger only if d is an object
                 if (event.keyCode === 13 && typeof d === 'object') {
                     d.chart.legendToggle(d)
@@ -219,13 +218,13 @@ export class HtmlLegend {
                     d.chart.legendToggle(d)
                     event.preventDefault();            
                 }
-            })
-            .on('focus', d => {
+            }))
+            .on('focus', d3compat.eventHandler(d => {
                 this._parent.legendHighlight(d);
-            })
-            .on('blur', d => {
+            }))
+            .on('blur', d3compat.eventHandler(d => {
                 this._parent.legendReset(d);
-            });
+            }));
     }
 }
 

src/charts/legend.js

@@ -1,5 +1,5 @@
 import {pluck, utils} from '../core/utils';
-import {adaptHandler} from '../core/d3compat';
+import {d3compat} from '../core/config';
 import {constants} from '../core/constants';
 
 const LABEL_GAP = 2;
@@ -241,7 +241,7 @@ export class Legend {
             .attr('tabindex', 0);
 
         tabElements
-            .on('keydown', adaptHandler((d, event) => {
+            .on('keydown', d3compat.eventHandler((d, event) => {
                 // trigger only if d is an object
                 if (event.keyCode === 13 && typeof d === 'object') {
                     d.chart.legendToggle(d)
@@ -252,10 +252,10 @@ export class Legend {
                     event.preventDefault();            
                 }
             }))
-            .on('focus', adaptHandler(d => {
+            .on('focus', d3compat.eventHandler(d => {
                 this._parent.legendHighlight(d);
             }))
-            .on('blur', adaptHandler(d => {
+            .on('blur', d3compat.eventHandler(d => {
                 this._parent.legendReset(d);
             }));
     }
@@ -277,13 +277,13 @@ export class Legend {
             .enter()
             .append('g')
             .attr('class', 'dc-legend-item')
-            .on('mouseover', adaptHandler(d => {
+            .on('mouseover', d3compat.eventHandler(d => {
                 this._parent.legendHighlight(d);
             }))
-            .on('mouseout', adaptHandler(d => {
+            .on('mouseout', d3compat.eventHandler(d => {
                 this._parent.legendReset(d);
             }))
-            .on('click', adaptHandler(d => {
+            .on('click', d3compat.eventHandler(d => {
                 d.chart.legendToggle(d);
             }));