update code to dc@4

this is a funny mix of ES5 closure-classes and ES6 classes
but it's nice to see it all works and there is an easy upgrade path :)

fixes #39

Author: gordonwoodhull

src/bubbleChart.js

@@ -5,7 +5,7 @@ dc_leaflet.bubbleChart = function (parent, chartGroup) {
      * Private variables -- default values.
      * ####################################
      */
-    var _chart = dc_leaflet.leafletBase({});
+    var _chart = dc_leaflet.leafletBase(dc.MarginMixin);
     var _selectedColor = 'blue';
     var _unselectedColor = 'gray';
     var _layerGroup = false;

src/choroplethChart.js

@@ -1,5 +1,5 @@
 dc_leaflet.choroplethChart = function(parent, chartGroup) {
-    var _chart = dc.colorChart(dc_leaflet.leafletBase({}));
+    var _chart = dc_leaflet.leafletBase(dc.ColorMixin(dc.MarginMixin));
 
     var _geojsonLayer = false;
     var _dataMap = [];
@@ -48,15 +48,16 @@ dc_leaflet.choroplethChart = function(parent, chartGroup) {
         _chart.map().addLayer(_geojsonLayer);
     };
 
-    dc.override(_chart, '_doRedraw', function() {
+    const super_doRedraw = _chart._doRedraw;
+    _chart._doRedraw = function() {
         _geojsonLayer.clearLayers();
         _dataMap=[];
         _chart._computeOrderedGroups(_chart.data()).forEach(function (d, i) {
             _dataMap[_chart.keyAccessor()(d)] = {'d':d, 'i':i};
         });
         _geojsonLayer.addData(_chart.geojson());
-        return _chart.__doRedraw();
-    });
+        return super_doRedraw.call(this);
+    };
 
     _chart.geojson = function(_) {
         if (!arguments.length) {

src/leafletBase.js

@@ -1,5 +1,5 @@
-dc_leaflet.leafletBase = function(_chart) {
-    _chart = dc.marginMixin(dc.baseChart(_chart));
+dc_leaflet.leafletBase = function(Base) {
+    var _chart = new Base();
 
     _chart.margins({left:0, top:0, right:0, bottom:0});
 
@@ -111,7 +111,8 @@ dc_leaflet.leafletBase = function(_chart) {
     };
 
     // combine Leaflet events into d3 & dc events
-    dc.override(_chart, 'on', function(event, callback) {
+    const super_on = _chart.on;
+    _chart.on = function(event, callback) {
         var leaflet_events = ['zoomend', 'moveend'];
         if(leaflet_events.indexOf(event) >= 0) {
             if(_map) {
@@ -122,8 +123,8 @@ dc_leaflet.leafletBase = function(_chart) {
             }
             return this;
         }
-        else return _chart._on(event, callback);
-    });
+        else return super_on.call(this, event, callback);
+    };
 
     return _chart;
 };

src/markerChart.js

@@ -1,5 +1,5 @@
 dc_leaflet.markerChart = function(parent, chartGroup) {
-    var _chart = dc_leaflet.leafletBase({});
+    var _chart = dc_leaflet.leafletBase(dc.MarginMixin);
 
     var _renderPopup = true;
     var _cluster = false; // requires leaflet.markerCluster