From ba11081d375b752982fd1cb2e68ca026ce3113cd Mon Sep 17 00:00:00 2001 From: Oleg Mihailik Date: Mon, 23 Oct 2017 08:17:07 +0100 Subject: [PATCH] D3 v4 - basic changes. --- package.json | 2 +- src/arc.js | 6 +-- src/axis.js | 4 +- src/color.js | 2 +- src/core.js | 92 +++++++++++++++++++++++++++++++++++++++++++-- src/data.convert.js | 2 +- src/interaction.js | 4 +- src/scale.js | 2 +- src/shape.line.js | 4 +- src/subchart.js | 2 +- src/zoom.js | 2 +- 11 files changed, 104 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 36d7bff..f649560 100644 --- a/package.json +++ b/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", diff --git a/src/arc.js b/src/arc.js index 7b5c16e..7224f6f 100644 --- a/src/arc.js +++ b/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"; diff --git a/src/axis.js b/src/axis.js index ab4faa5..3837802 100644 --- a/src/axis.js +++ b/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); } diff --git a/src/color.js b/src/color.js index 4585d85..541ce8c 100644 --- a/src/color.js +++ b/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 = []; diff --git a/src/core.js b/src/core.js index f2a48e1..a80fb16 100644 --- a/src/core.js +++ b/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; - $$.axisTimeFormat = config.axis_x_localtime ? d3.time.format : d3.time.format.utc; + $$.dataTimeFormat = config.data_xLocaltime ? $$.d3_timeFormat : $$.d3_utcFormat; + $$.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; diff --git a/src/data.convert.js b/src/data.convert.js index 0edac36..50da11f 100644 --- a/src/data.convert.js +++ b/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]); diff --git a/src/interaction.js b/src/interaction.js index a51f6de..99bb7ff 100644 --- a/src/interaction.js +++ b/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(); }) diff --git a/src/scale.js b/src/scale.js index 85fa792..4cd689d 100644 --- a/src/scale.js +++ b/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, diff --git a/src/shape.line.js b/src/shape.line.js index bdb03c7..6c4b998 100644 --- a/src/shape.line.js +++ b/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); }, diff --git a/src/subchart.js b/src/subchart.js index a4dacf7..8e63a53 100644 --- a/src/subchart.js +++ b/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; diff --git a/src/zoom.js b/src/zoom.js index fea6bda..50d2e30 100644 --- a/src/zoom.js +++ b/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;