D3 v4 - basic changes.

package.json

@@ -38,7 +38,7 @@
   "gitHead": "84e03109d9a590f9c8ef687c03d751f666080c6f",
   "readmeFilename": "README.md",
   "dependencies": {
-    "d3": "~3.5.0"
+    "d3": "^4.11.0"
   },
   "devDependencies": {
     "babel-plugin-external-helpers": "^6.22.0",

src/arc.js

@@ -4,7 +4,7 @@ import { isFunction } from './util';
 
 c3_chart_internal_fn.initPie = function () {
     var $$ = this, d3 = $$.d3;
-    $$.pie = d3.layout.pie().value(function (d) {
+    $$.pie = $$.d3_pie().value(function (d) {
         return d.values.reduce(function (a, b) { return a + b.value; }, 0);
     });
     $$.pie.sort($$.getOrderFunction() || null);
@@ -62,7 +62,7 @@ c3_chart_internal_fn.updateAngle = function (d) {
 
 c3_chart_internal_fn.getSvgArc = function () {
     var $$ = this,
-        arc = $$.d3.svg.arc().outerRadius($$.radius).innerRadius($$.innerRadius),
+        arc = $$.d3_arc().outerRadius($$.radius).innerRadius($$.innerRadius),
         newArc = function (d, withoutUpdate) {
             var updated;
             if (withoutUpdate) { return arc(d); } // for interpolate
@@ -76,7 +76,7 @@ c3_chart_internal_fn.getSvgArc = function () {
 
 c3_chart_internal_fn.getSvgArcExpanded = function (rate) {
     var $$ = this,
-        arc = $$.d3.svg.arc().outerRadius($$.radiusExpanded * (rate ? rate : 1)).innerRadius($$.innerRadius);
+        arc = $$.d3_arc().outerRadius($$.radiusExpanded * (rate ? rate : 1)).innerRadius($$.innerRadius);
     return function (d) {
         var updated = $$.updateAngle(d);
         return updated ? arc(updated) : "M 0 0";

src/axis.js

@@ -11,7 +11,7 @@ function AxisInternal(component, params) {
     internal.params = params || {};
 
     internal.d3 = component.d3;
-    internal.scale = internal.d3.scale.linear();
+    internal.scale = component.d3_scaleLinear();
     internal.range;
     internal.orient = "bottom";
     internal.innerTickSize = 6;
@@ -461,7 +461,7 @@ c3_axis_fn.getYAxis = function getYAxis(scale, orient, tickFormat, tickValues, w
         },
         axis = new this.internal(this, axisParams).axis.scale(scale).orient(orient).tickFormat(tickFormat);
     if ($$.isTimeSeriesY()) {
-        axis.ticks($$.d3.time[config.axis_y_tick_time_value], config.axis_y_tick_time_interval);
+        axis.ticks($$.d3_timeIntervalLookup(config.axis_y_tick_time_value), config.axis_y_tick_time_interval);
     } else {
         axis.tickValues(tickValues);
     }

src/color.js

@@ -4,7 +4,7 @@ import { notEmpty } from './util';
 c3_chart_internal_fn.generateColor = function () {
     var $$ = this, config = $$.config, d3 = $$.d3,
         colors = config.data_colors,
-        pattern = notEmpty(config.color_pattern) ? config.color_pattern : d3.scale.category10().range(),
+        pattern = notEmpty(config.color_pattern) ? config.color_pattern : $$.d3_scaleCategory10().range(),
         callback = config.data_color,
         ids = [];
 

src/core.js

@@ -107,8 +107,8 @@ c3_chart_internal_fn.initParams = function () {
     $$.color = $$.generateColor();
     $$.levelColor = $$.generateLevelColor();
 
-    $$.dataTimeFormat = config.data_xLocaltime ? d3.time.format : d3.time.format.utc;
+    $$.dataTimeFormat = config.data_xLocaltime ? $$.d3_timeFormat : $$.d3_utcFormat;
-    $$.axisTimeFormat = config.axis_x_localtime ? d3.time.format : d3.time.format.utc;
+    $$.axisTimeFormat = config.axis_x_localtime ? $$.d3_timeFormat : $$.d3_utcFormat;
     $$.defaultAxisTimeFormat = $$.axisTimeFormat.multi([
         [".%L", function (d) { return d.getMilliseconds(); }],
         [":%S", function (d) { return d.getSeconds(); }],
@@ -937,7 +937,7 @@ c3_chart_internal_fn.bindResize = function () {
     $$.resizeFunction.add(function () {
         config.onresized.call($$);
     });
-    
+
     var resizeIfElementDisplayed = function() {
         // if element not displayed skip it
         if (!$$.api.element.offsetParent) {
@@ -1064,6 +1064,92 @@ c3_chart_internal_fn.isTabVisible = function () {
     return document[hidden] ? false : true;
 };
 
+// D3 v3/4 compatiblity
+c3_chart_internal_fn.d3_scaleCategory10 = function () {
+    return d3.schemeCategory10 ?
+        d3.scaleOrdinal(d3.schemeCategory10) :
+        d3.scale.category10();
+};
+
+c3_chart_internal_fn.d3_scaleLinear = function () {
+    return d3.scaleLinear ?
+        d3.scaleLinear() :
+        d3.scale.linear();
+};
+
+c3_chart_internal_fn.d3_pie = function () {
+    return d3.pie ?
+        d3.pie() :
+        d3.layout.pie();
+};
+
+c3_chart_internal_fn.d3_arc = function () {
+    return d3.arc ?
+        d3.arc() :
+        d3.svg.arc();
+};
+
+c3_chart_internal_fn.d3_timeFormat = function (specifier) {
+    return d3.timeFormat ?
+        d3.timeFormat(specifier) :
+        d3.time.format(specifier);
+};
+
+c3_chart_internal_fn.d3_utcFormat = function (specifier) {
+    return d3.utcFormat ?
+        d3.utcFormat(specifier) :
+        d3.time.format.utc(specifier);
+};
+
+c3_chart_internal_fn.d3_scaleTime = function () {
+    return d3.scaleTime ?
+        d3.scaleTime() :
+        d3.time.scale();
+};
+
+c3_chart_internal_fn.d3_timeIntervalLookup = function (name) {
+    return d3['time' + name.charAt(0).toUpperCase() + name.slice(1)];
+};
+
+c3_chart_internal_fn.d3_request = function (url) {
+    return d3.request ?
+        d3.request(url) :
+        d3.xhr(url);
+};
+
+c3_chart_internal_fn.d3_dragSubject = function (Obj) {
+    return d3.drag ?
+        d3.drag().subject(Obj) :
+        d3.behavior.drag().origin(Obj);
+};
+
+c3_chart_internal_fn.d3_line = function () {
+    return d3.line ?
+        d3.line() :
+        d3.svg.line();
+};
+
+c3_chart_internal_fn.d3_area = function () {
+    return d3.area ?
+        d3.area() :
+        d3.svg.area();
+};
+
+// TODO: check with docs at https://github.com/d3/d3/blob/master/CHANGES.md#brushes-d3-brush
+c3_chart_internal_fn.d3_brush = function () {
+    return d3.brush ?
+        d3.brush() :
+        d3.svg.brush();
+};
+
+// TODO: check with docs at https://github.com/d3/d3/blob/master/CHANGES.md#zooming-d3-zoom
+c3_chart_internal_fn.d3_zoom = function () {
+    return d3.zoom ?
+        d3.zoom() :
+        d3.d3.behavior.zoom();
+};
+
+
 c3_chart_internal_fn.isValue = isValue;
 c3_chart_internal_fn.isFunction = isFunction;
 c3_chart_internal_fn.isString = isString;

src/data.convert.js

@@ -3,7 +3,7 @@ import { isValue, isUndefined, isDefined, notEmpty } from './util';
 
 c3_chart_internal_fn.convertUrlToData = function (url, mimeType, headers, keys, done) {
     var $$ = this, type = mimeType ? mimeType : 'csv';
-    var req = $$.d3.xhr(url);
+    var req = $$.d3_request(url);
     if (headers) {
         Object.keys(headers).forEach(function (header) {
             req.header(header, headers[header]);

src/interaction.js

@@ -219,7 +219,7 @@ c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
         })
         .call(
             config.data_selection_draggable && $$.drag ? (
-                d3.behavior.drag().origin(Object)
+                $$.d3_dragSubject(Object)
                     .on('drag', function () { $$.drag(d3.mouse(this)); })
                     .on('dragstart', function () { $$.dragstart(d3.mouse(this)); })
                     .on('dragend', function () { $$.dragend(); })
@@ -319,7 +319,7 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
         })
         .call(
             config.data_selection_draggable && $$.drag ? (
-                d3.behavior.drag().origin(Object)
+                $$.d3_dragSubject(Object)
                     .on('drag', function () { $$.drag(d3.mouse(this)); })
                     .on('dragstart', function () { $$.dragstart(d3.mouse(this)); })
                     .on('dragend', function () { $$.dragend(); })

src/scale.js

@@ -1,7 +1,7 @@
 import { c3_chart_internal_fn } from './core';
 
 c3_chart_internal_fn.getScale = function (min, max, forTimeseries) {
-    return (forTimeseries ? this.d3.time.scale() : this.d3.scale.linear()).range([min, max]);
+    return (forTimeseries ? this.d3_scaleTime() : this.d3_scaleLinear()).range([min, max]);
 };
 c3_chart_internal_fn.getX = function (min, max, domain, offset) {
     var $$ = this,

src/shape.line.js

@@ -68,7 +68,7 @@ c3_chart_internal_fn.redrawLine = function (drawLine, withTransition) {
 };
 c3_chart_internal_fn.generateDrawLine = function (lineIndices, isSub) {
     var $$ = this, config = $$.config,
-        line = $$.d3.svg.line(),
+        line = $$.d3_line(),
         getPoints = $$.generateGetLinePoints(lineIndices, isSub),
         yScaleGetter = isSub ? $$.getSubYScale : $$.getYScale,
         xValue = function (d) { return (isSub ? $$.subxx : $$.xx).call($$, d); },
@@ -243,7 +243,7 @@ c3_chart_internal_fn.redrawArea = function (drawArea, withTransition) {
     ];
 };
 c3_chart_internal_fn.generateDrawArea = function (areaIndices, isSub) {
-    var $$ = this, config = $$.config, area = $$.d3.svg.area(),
+    var $$ = this, config = $$.config, area = $$.d3_area(),
         getPoints = $$.generateGetAreaPoints(areaIndices, isSub),
         yScaleGetter = isSub ? $$.getSubYScale : $$.getYScale,
         xValue = function (d) { return (isSub ? $$.subxx : $$.xx).call($$, d); },

src/subchart.js

@@ -4,7 +4,7 @@ import { isFunction } from './util';
 
 c3_chart_internal_fn.initBrush = function () {
     var $$ = this, d3 = $$.d3;
-    $$.brush = d3.svg.brush().on("brush", function () { $$.redrawForBrush(); });
+    $$.brush = $$.d3_brush().on("brush", function () { $$.redrawForBrush(); });
     $$.brush.update = function () {
         if ($$.context) { $$.context.select('.' + CLASS.brush).call(this); }
         return this;

src/zoom.js

@@ -5,7 +5,7 @@ import { diffDomain } from './util';
 c3_chart_internal_fn.initZoom = function () {
     var $$ = this, d3 = $$.d3, config = $$.config, startEvent;
 
-    $$.zoom = d3.behavior.zoom()
+    $$.zoom = $$.d3_zoom()
         .on("zoomstart", function () {
             startEvent = d3.event.sourceEvent;
             $$.zoom.altDomain = d3.event.sourceEvent.altKey ? $$.x.orgDomain() : null;