geojs 1.11.2 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geojs",
-  "version": "1.11.2",
+  "version": "1.12.0",
   "description": "JavaScript Geo Visualization and Analysis Library",
   "homepage": "https://github.com/OpenGeoscience/geojs",
   "license": "Apache-2.0",
@@ -27,7 +27,7 @@
   },
   "optionalDependencies": {
     "@egjs/hammerjs": "^2.0.8",
-    "d3": "^3.5.17",
+    "d3": "^7.8.5",
     "glslang-validator-prebuilt-predownloaded": "^0.0.2",
     "vtk.js": "*"
   },
@@ -50,11 +50,11 @@
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-n": "^15.2.4",
     "eslint-plugin-promise": "^6.0.0",
-    "expose-loader": "^4.0.0",
+    "expose-loader": "^5.0.0",
     "express": "^4.17.2",
     "fs-extra": "^11.0.0",
     "glob": "^10.1.0",
-    "imports-loader": "^4.0.0",
+    "imports-loader": "^5.0.0",
     "jasmine-core": "^5.0.0",
     "js-yaml": "^4.1.0",
     "jsdoc": "^4.0.0",
@@ -83,10 +83,10 @@
     "shader-loader": "git+https://github.com/Makio64/shader-loader",
     "sinon": "^17.0.0",
     "style-loader": "^3.3.1",
-    "stylelint": "^15.11.0",
-    "stylelint-stylus": "^0.18.0",
-    "stylus": "^0.59.0",
-    "stylus-loader": "^7.0.0",
+    "stylelint": "^16.0.0",
+    "stylelint-stylus": "^1.0.0",
+    "stylus": "^0.62.0",
+    "stylus-loader": "^8.0.0",
     "tar": "^6.1.13",
     "terser-webpack-plugin": "^5.3.1",
     "touch-emulator": "^1.0.0",

package/src/choroplethFeature.js

@@ -9,7 +9,7 @@ var feature = require('./feature');
  * @property {geo.colorObject[]} [colorRange] Color lookup table.  Default is
  *   9-step color table.
  * @property {function} [scale] A scale converts a input domain into the
- *   the colorRange.  Default is `d3.scale.quantize()`.
+ *   the colorRange.  Default is `d3.scaleQuantize()`.
  * @property {function} [geoId] Given a geometry feature, return an identifier.
  * @property {function} [scalarId] Given a scalar element, return an
  *   identifier.
@@ -59,7 +59,7 @@ var choroplethFeature = function (arg) {
             {r: 1, g: 0.472800903, b: 0.404551679},
             {r: 0.916482116, g: 0.236630659, b: 0.209939162}
           ],
-          scale: d3.scale.quantize(),
+          scale: d3.scaleQuantize(),
           //accessor for ID on geodata feature
           geoId: function (geoFeature) {
             return geoFeature.properties.GEO_ID;

package/src/svg/lineFeature.js

@@ -82,11 +82,11 @@ var svg_lineFeature = function (arg) {
         }
       }
 
-      line = d3.svg.line()
+      line = d3.line()
           .x(function (d) { return m_this.featureGcsToDisplay(d).x; })
           .y(function (d) { return m_this.featureGcsToDisplay(d).y; })
-          .interpolate(m_this.style.get('closed')(item, idx) && ln.length > 2 ?
-            'linear-closed' : 'linear');
+          .curve(m_this.style.get('closed')(item, idx) && ln.length > 2 ?
+            d3.curveLinearClosed : d3.curveLinear);
       // item is an object representing a single line
       // m_this.line()(item) is an array of coordinates
       m_style = {

package/src/svg/pathFeature.js

@@ -19,7 +19,6 @@ var svg_pathFeature = function (arg) {
   }
 
   var $ = require('jquery');
-  var d3 = require('./svgRenderer').d3;
   var object = require('./object');
   var timestamp = require('../timestamp');
 
@@ -47,11 +46,12 @@ var svg_pathFeature = function (arg) {
     s_update.call(m_this);
 
     diag = function (d) {
-      var p = {
-        source: d.source,
-        target: d.target
-      };
-      return d3.svg.diagonal()(p);
+      // in d3 v3 this was "d3.svg.diagonal(d);".  See
+      // https://stackoverflow.com/questions/40845121/where-is-d3-svg-diagonal
+      return 'M' + d.source.x + ',' + d.source.y + 'C' +
+        d.source.x + ',' + (d.source.y + d.target.y) / 2 + ' ' +
+        d.target.x + ',' + (d.source.y + d.target.y) / 2 + ' ' +
+        d.target.x + ',' + d.target.y;
     };
     tmp = [];
     data.forEach(function (d, i) {

package/src/svg/svgRenderer.js

@@ -591,7 +591,9 @@ var svgRenderer = function (arg) {
         entries, rendersel;
     entries = selection.enter().append(append);
     selection.exit().remove();
-    rendersel = m_features[id].onlyRenderNew ? entries : selection;
+    // in d3 v3 this was
+    // rendersel = m_features[id].onlyRenderNew ? entries : selection;
+    rendersel = entries;
     setAttrs(rendersel, attributes);
     rendersel.attr('class', classes.concat([id]).join(' '));
     setStyles(rendersel, style);

package/src/svg/vectorFeature.js

@@ -143,17 +143,17 @@ var svg_vectorFeature = function (arg) {
       return markers;
     }, []);
 
+    markerGroup = m_this.renderer()._definitions()
+      .selectAll('g.marker-group#' + m_this._svgid());
+
     var sel = markerGroup
       .selectAll('marker.geo-vector-marker')
       .data(markers);
 
-    sel.enter()
-      .append('marker')
-      .append('path');
-
     var renderer = m_this.renderer();
 
-    sel
+    sel.enter()
+      .append('marker')
       .each(function (d) {
         var marker = d3.select(this);
         var markerData = d.head ? markerConfigs[endStyle(d.data, d.dataIndex)] : markerConfigs[originStyle(d.data, d.dataIndex)];
@@ -173,7 +173,7 @@ var svg_vectorFeature = function (arg) {
       .style('opacity', function (d) {
         return opacity(d.data, d.dataIndex);
       })
-      .select('path')
+      .append('path')
       .attr('d', function (d) {
         return d.head ? markerConfigs[endStyle(d.data, d.dataIndex)].path : markerConfigs[originStyle(d.data, d.dataIndex)].path;
       });

package/src/ui/colorLegendWidget.js

@@ -108,13 +108,10 @@ var colorLegendWidget = function (arg) {
 
       var legendSvg = legendContainer
         .append('svg')
-        .attr({
-          class: 'svg',
-          width: width,
-          height: '40px',
-          viewBox: -margin + ' 0 ' + width + ' 40'
-        });
-
+        .attr('class', 'svg')
+        .attr('width', width)
+        .attr('height', '40px')
+        .attr('viewBox', -margin + ' 0 ' + width + ' 40');
       if (category.type === 'discrete') {
         m_this._drawDiscrete(legendSvg, width - 2 * margin, category);
       } else if (category.type === 'continuous') {
@@ -190,32 +187,41 @@ var colorLegendWidget = function (arg) {
    * @param {geo.gui.colorLegendWidget.category} category The discrete type legend category
    */
   this._drawDiscrete = function (svg, width, category) {
+    /**
+     * Render the d3 axis object based on the axis d3 Scale.
+     * @param {object} axisScale d3 scale object
+     * @returns {object} d3 axis object
+     */
+    function createAxis(axisScale) {
+      var skip = Math.ceil(axisScale.domain().length / m_ticks);
+      var values = axisScale.domain().filter(function (d, i) { return i % skip === 0; });
+      return d3.axisBottom(axisScale)
+        .tickFormat(d3.format('.2s'))
+        .tickValues(values);
+    }
+
     if (['linear', 'log', 'sqrt', 'pow', 'quantile', 'ordinal'].indexOf(category.scale) === -1) {
       throw new Error('unsupported scale');
     }
     var valueRange, valueScale, colorScale, axisScale, axis, steps, ticks;
     if (category.scale === 'ordinal') {
-      colorScale = d3.scale.ordinal()
+      colorScale = d3.scaleOrdinal()
         .domain(category.domain)
         .range(category.colors);
       m_this._renderDiscreteColors(
         svg, category.domain, colorScale, width, function (d) { return d; });
 
-      axisScale = d3.scale.ordinal()
+      axisScale = d3.scaleBand()
         .domain(category.domain)
-        .rangeRoundBands([0, width]);
-      axis = d3.svg.axis()
-        .scale(axisScale)
-        .tickValues(function () {
-          var skip = Math.ceil(category.domain.length / m_ticks);
-          return category.domain
-            .filter(function (d, i) { return i % skip === 0; });
-        });
+        .rangeRound([0, width]);
+      var skip = Math.ceil(category.domain.length / m_ticks);
+      var values = category.domain.filter(function (d, i) { return i % skip === 0; });
+      axis = d3.axisBottom(axisScale).tickValues(values);
     } else if (category.scale === 'quantile') {
       valueRange = [0, category.colors.length];
       steps = util.range(0, category.colors.length - 1);
-      valueScale = d3.scale.quantile().domain(category.domain).range(steps);
-      colorScale = d3.scale.quantize().domain(valueRange).range(category.colors);
+      valueScale = d3.scaleQuantile().domain(category.domain).range(steps);
+      colorScale = d3.scaleQuantize().domain(valueRange).range(category.colors);
       m_this._renderDiscreteColors(svg, steps, colorScale, width, function (d) {
         return valueScale.invertExtent(d).join(' - ');
       });
@@ -224,15 +230,15 @@ var colorLegendWidget = function (arg) {
       axisDomain = axisDomain.concat(steps.map(
         function (step) { return valueScale.invertExtent(step)[1]; }));
 
-      axisScale = d3.scale.ordinal()
+      axisScale = d3.scalePoint()
         .domain(axisDomain)
-        .rangePoints([0, width]);
+        .range([0, width]);
       axis = createAxis(axisScale);
     } else if (['linear', 'log', 'sqrt', 'pow'].indexOf(category.scale) !== -1) {
       valueRange = [0, category.colors.length];
-      valueScale = d3.scale[category.scale]()
+      valueScale = d3['scale' + category.scale.charAt(0).toUpperCase() + category.scale.slice(1)]()
         .domain(category.domain).range(valueRange).nice();
-      colorScale = d3.scale.quantize().domain(valueRange).range(category.colors);
+      colorScale = d3.scaleQuantize().domain(valueRange).range(category.colors);
       steps = util.range(0, category.colors.length - 1);
       var precision = Math.max.apply(null, category.domain
         .map(function (number) { return getPrecision(number); }));
@@ -243,32 +249,17 @@ var colorLegendWidget = function (arg) {
 
       ticks = steps.slice();
       ticks.push(category.colors.length);
-      axisScale = d3.scale.ordinal()
+      axisScale = d3.scalePoint()
         .domain(ticks.map(function (tick) {
           return valueScale.invert(tick);
         }))
-        .rangePoints([0, width]);
+        .range([0, width]);
       axis = createAxis(axisScale);
     }
     if (category.endAxisLabelOnly) {
       axis.tickValues([axisScale.domain()[0], axisScale.domain()[axisScale.domain().length - 1]]);
     }
     m_this._renderAxis(svg, axis);
-
-    /**
-     * Render the d3 axis object based on the axis d3 Scale.
-     * @param {object} axisScale d3 scale object
-     * @returns {object} d3 axis object
-     */
-    function createAxis(axisScale) {
-      return d3.svg.axis()
-        .scale(axisScale)
-        .tickFormat(d3.format('.2s'))
-        .tickValues(function () {
-          var skip = Math.ceil(axisScale.domain().length / m_ticks);
-          return axisScale.domain().filter(function (d, i) { return i % skip === 0; });
-        });
-    }
   };
 
   /**
@@ -292,8 +283,8 @@ var colorLegendWidget = function (arg) {
       .attr('transform', function (d, i) {
         return 'translate(' + i * width / steps.length + ' ,0)';
       })
-      .on('mousemove', function (d) {
-        m_this._showPopup(getValue(d));
+      .on('mousemove', function (evt, d) {
+        m_this._showPopup(evt, getValue(d));
       })
       .on('mouseout', m_this._hidePopup);
   };
@@ -314,7 +305,7 @@ var colorLegendWidget = function (arg) {
       range.push((width / (category.domain.length - 1) * i));
     }
     range.push(width);
-    axisScale = d3.scale[category.scale]().domain(category.domain).range(range).nice();
+    axisScale = d3['scale' + category.scale.charAt(0).toUpperCase() + category.scale.slice(1)]().domain(category.domain).range(range).nice();
     if (category.scale === 'log' && category.base) {
       axisScale.base(category.base);
     }
@@ -344,15 +335,14 @@ var colorLegendWidget = function (arg) {
       .attr('fill', 'url(#gradient' + id + ')')
       .attr('width', width)
       .attr('height', '20px')
-      .on('mousemove', function () {
-        var value = axisScale.invert(d3.mouse(this)[0]);
+      .on('mousemove', function (event) {
+        var value = axisScale.invert(d3.pointer(event)[0]);
         var text = m_this._popupFormatter(value, precision);
-        m_this._showPopup(text);
+        m_this._showPopup(event, text);
       })
       .on('mouseout', m_this._hidePopup);
 
-    axis = d3.svg.axis()
-      .scale(axisScale)
+    axis = d3.axisBottom(axisScale)
       .ticks(m_ticks, '.2s');
     if (category.endAxisLabelOnly) {
       axis.tickValues([category.domain[0], category.domain[category.domain.length - 1]]);
@@ -369,9 +359,12 @@ var colorLegendWidget = function (arg) {
     svg.append('g')
       .attr('class', 'axis x')
       .attr('transform', 'translate(0, 20)')
+      /*
       .call(function (g) {
         g.call(axis);
       });
+      */
+      .call(axis);
   };
 
   /**
@@ -390,22 +383,20 @@ var colorLegendWidget = function (arg) {
 
   /**
    * Show the popup based on current mouse event.
+   * @param {d3.event} event The triggering d3 event.
    * @param {string} text content to be shown in the popup
    */
-  this._showPopup = function (text) {
+  this._showPopup = function (event, text) {
     // The cursor location relative to the container
-    var offset = d3.mouse(m_this.canvas());
+    var offset = d3.pointer(event, m_this.canvas());
     m_this.popup
       .text(text);
     var containerWidth = m_this.canvas().clientWidth;
-    var popupWidth = m_this.popup[0][0].clientWidth;
+    var popupWidth = m_this.popup.node().clientWidth;
     m_this.popup
-      .style({
-        // If the popup will be longer or almost longer than the container
-        left: offset[0] - (offset[0] +
-          popupWidth - containerWidth > -10 ? popupWidth : 0) + 'px',
-        top: (offset[1] - 22) + 'px'
-      })
+      // If the popup will be longer or almost longer than the container
+      .style('left', offset[0] - (offset[0] + popupWidth - containerWidth > -10 ? popupWidth : 0) + 'px')
+      .style('top', (offset[1] - 22) + 'px')
       .transition()
       .duration(200)
       .style('opacity', 1);

package/src/ui/legendWidget.js

@@ -206,10 +206,10 @@ var legendWidget = function (arg) {
    */
   this._scale = function () {
     return {
-      x: d3.scale.linear()
+      x: d3.scaleLinear()
         .domain([0, 1])
         .range([0, m_this.size().width]),
-      y: d3.scale.linear()
+      y: d3.scaleLinear()
         .domain([0, m_categories.length - 1])
         .range([m_padding / 2, m_this.size().height - m_padding / 2])
     };
@@ -249,16 +249,15 @@ var legendWidget = function (arg) {
       .attr('width', w - 4)
       .attr('height', h - 4)
       .attr('rx', 3)
-      .attr('ry', 3)
-      .style({
-        stroke: 'black',
-        'stroke-width': '1.5px',
-        fill: 'white',
-        'fill-opacity': 0.75,
-        display: 'none'
-      });
-    m_group.on('mousedown', function () {
-      d3.event.stopPropagation();
+      .attr('ry', 3);
+    m_border
+      .style('stroke', 'black')
+      .style('stroke-width', '1.5px')
+      .style('fill', 'white')
+      .style('fill-opacity', 0.75)
+      .style('display', 'none');
+    m_group.on('mousedown', function (evt) {
+      evt.stopPropagation();
     });
     m_group.on('mouseover', function () {
       m_border.transition()

package/src/ui/scaleWidget.js

@@ -123,10 +123,7 @@ var scaleWidget = function (arg) {
     m_this._appendCanvasToParent();
     m_this.reposition();
 
-    d3.select(m_this.canvas()).attr({
-      width: m_options.maxWidth,
-      height: m_options.maxHeight
-    });
+    d3.select(m_this.canvas()).attr('width', m_options.maxWidth).attr('height', m_options.maxHeight);
     // Update the scale on pan
     m_this.geoOn(geo_event.pan, m_this._update);
     m_this._render();
@@ -220,8 +217,7 @@ var scaleWidget = function (arg) {
     pixels = (vert ? m_options.maxHeight : m_options.maxWidth) - sw;
     /* Calculate the distance that the maximum length scale bar can occupy at
      * the location that the scale bar will be drawn. */
-    // svg.attr({width: width, height: height});
-    pt1 = $(svg[0][0]).offset();
+    pt1 = $(svg.node()).offset();
     pt1 = {
       x: pt1.left + (m_options.orientation === 'left' ? width - sw2 : sw2),
       y: pt1.top + (m_options.orientation === 'top' ? height - sw2 : sw2)
@@ -238,12 +234,9 @@ var scaleWidget = function (arg) {
     } else {
       width = value.pixels + sw;
     }
-    svg.attr({width: width, height: height});
+    svg.attr('width', width).attr('height', height);
     if (svg.select('polyline').empty()) {
-      svg.append('polyline').classed('geojs-scale-widget-bar', true).attr({
-        fill: 'none',
-        'stroke-width': sw
-      });
+      svg.append('polyline').classed('geojs-scale-widget-bar', true).attr('fill', 'none').attr('stroke-width', sw);
     }
     if (svg.select('text').empty()) {
       svg.append('text').classed('geojs-scale-widget-text', true);
@@ -251,39 +244,35 @@ var scaleWidget = function (arg) {
     switch (m_options.orientation) {
       case 'bottom':
         pts = [[sw2, tl], [sw2, sw2], [width - sw2, sw2], [width - sw2, tl]];
-        svg.select('text').attr({
-          x: width / 2,
-          y: sw * 2,
-          'text-anchor': 'middle',
-          'dominant-baseline': 'hanging'
-        });
+        svg.select('text')
+          .attr('x', width / 2)
+          .attr('y', sw * 2)
+          .attr('text-anchor', 'middle')
+          .attr('dominant-baseline', 'hanging');
         break;
       case 'top':
         pts = [[sw2, height - tl], [sw2, height - sw2], [width - sw2, height - sw2], [width - sw2, height - tl]];
-        svg.select('text').attr({
-          x: width / 2,
-          y: height - sw * 2,
-          'text-anchor': 'middle',
-          'dominant-baseline': 'alphabetic'
-        });
+        svg.select('text')
+          .attr('x', width / 2)
+          .attr('y', height - sw * 2)
+          .attr('text-anchor', 'middle')
+          .attr('dominant-baseline', 'alphabetic');
         break;
       case 'left':
         pts = [[width - tl, sw2], [width - sw2, sw2], [width - sw2, height - sw2], [width - tl, height - sw2]];
-        svg.select('text').attr({
-          x: width - sw * 2,
-          y: height / 2,
-          'text-anchor': 'end',
-          'dominant-baseline': 'middle'
-        });
+        svg.select('text')
+          .attr('x', width - sw * 2)
+          .attr('y', height / 2)
+          .attr('text-anchor', 'end')
+          .attr('dominant-baseline', 'middle');
         break;
       case 'right':
         pts = [[tl, sw2], [sw2, sw2], [sw2, height - sw2], [tl, height - sw2]];
-        svg.select('text').attr({
-          x: sw * 2,
-          y: height / 2,
-          'text-anchor': 'start',
-          'dominant-baseline': 'middle'
-        });
+        svg.select('text')
+          .attr('x', sw * 2)
+          .attr('y', height / 2)
+          .attr('text-anchor', 'start')
+          .attr('dominant-baseline', 'middle');
         break;
     }
     svg.select('polyline').attr('points', pts.map(function (pt) { return pt.join(','); }).join(' '));

package/src/ui/sliderWidget.js

@@ -112,8 +112,8 @@ var sliderWidget = function (arg) {
 
     // create d3 scales for positioning
     // TODO: make customizable and responsive
-    m_xscale = d3.scale.linear().domain([-4, 4]).range([0, m_width]);
-    m_yscale = d3.scale.linear().domain([0, 1]).range([m_width * 1.5, m_height - m_width * 1.5]);
+    m_xscale = d3.scaleLinear().domain([-4, 4]).range([0, m_width]);
+    m_yscale = d3.scaleLinear().domain([0, 1]).range([m_width * 1.5, m_height - m_width * 1.5]);
 
     // Create the main group element
     svg = svg.append('g').classed('geo-ui-slider', true);
@@ -130,19 +130,17 @@ var sliderWidget = function (arg) {
       .attr('cx', m_xscale(0))
       .attr('cy', m_yscale(0.0) - m_width + 2)
       .attr('r', (m_width - 2) / 2)
-      .style({
-        cursor: 'pointer'
-      })
+      .style('cursor', 'pointer')
       .on('click', function () {
         var z = map.zoom();
         map.transition({
           zoom: z + 1,
-          ease: d3.ease('cubic-in-out'),
+          ease: d3.easeCubicInOut,
           duration: 500
         });
       })
-      .on('mousedown', function () {
-        d3.event.stopPropagation();
+      .on('mousedown', function (evt) {
+        evt.stopPropagation();
       });
 
     put_icon(
@@ -170,19 +168,17 @@ var sliderWidget = function (arg) {
       .attr('cx', m_xscale(0))
       .attr('cy', m_yscale(1.0) + m_width - 2)
       .attr('r', (m_width - 2) / 2)
-      .style({
-        cursor: 'pointer'
-      })
+      .style('cursor', 'pointer')
       .on('click', function () {
         var z = map.zoom();
         map.transition({
           zoom: z - 1,
-          ease: d3.ease('cubic-in-out'),
+          ease: d3.easeCubicInOut,
           duration: 500
         });
       })
-      .on('mousedown', function () {
-        d3.event.stopPropagation();
+      .on('mousedown', function (evt) {
+        evt.stopPropagation();
       });
 
     put_icon(
@@ -206,13 +202,13 @@ var sliderWidget = function (arg) {
      * @param {boolean} [trans] Truthy for an animated transition.
      */
     function respond(evt, trans) {
-      var z = m_yscale.invert(d3.mouse(svg.node())[1]),
+      var z = m_yscale.invert(d3.pointer(event, svg.node())[1]),
           zrange = map.zoomRange();
       z = (1 - z) * (zrange.max - zrange.min) + zrange.min;
       if (trans) {
         map.transition({
           zoom: z,
-          ease: d3.ease('cubic-in-out'),
+          ease: d3.easeCubicInOut,
           duration: 500,
           done: m_this._update()
         });
@@ -236,11 +232,9 @@ var sliderWidget = function (arg) {
       .attr('ry', m_width / 10)
       .attr('width', m_width / 3)
       .attr('height', m_height - m_width * 3)
-      .style({
-        cursor: 'pointer'
-      })
-      .on('click', function () {
-        respond(d3.event, true);
+      .style('cursor', 'pointer')
+      .on('click', function (evt) {
+        respond(evt, true);
       });
 
     // Create the nub
@@ -256,18 +250,16 @@ var sliderWidget = function (arg) {
       .attr('ry', 3)
       .attr('width', m_width)
       .attr('height', m_nubSize)
-      .style({
-        cursor: 'pointer'
-      })
-      .on('mousedown', function () {
+      .style('cursor', 'pointer')
+      .on('mousedown', function (evt) {
         d3.select(document).on('mousemove.geo.slider', function () {
-          respond(d3.event);
+          respond(evt);
         });
         d3.select(document).on('mouseup.geo.slider', function () {
-          respond(d3.event);
+          respond(evt);
           d3.select(document).on('.geo.slider', null);
         });
-        d3.event.stopPropagation();
+        evt.stopPropagation();
       });
 
     /**
@@ -332,7 +324,7 @@ var sliderWidget = function (arg) {
     var map = m_this.layer().map(),
         zoomRange = map.zoomRange(),
         zoom = map.zoom(),
-        zoomScale = d3.scale.linear();
+        zoomScale = d3.scaleLinear();
 
     obj = obj || {};
     zoom = obj.value || zoom;

package/src/ui/svgWidget.js

@@ -89,7 +89,7 @@ var svgWidget = function (arg) {
     // svg widgets manage their own sizes, so make the resize handler a no-op
     m_renderer._resize = function () {};
 
-    m_this.canvas(m_renderer.canvas()[0][0]);
+    m_this.canvas(m_renderer.canvas().node());
   };
 
   return this;

package/src/vendor.js

@@ -1,12 +1,4 @@
-// License headers that will be preserved in distributed bundles.
-/*
- * d3
- * @copyright 2010-2016, Michael Bostock
- * @license BSD-3-Clause
- */
-
 var globals = {
-  d3: require('d3'),
   hammerjs: require('hammerjs')
 };