From b4e9f4a7455a66a893ac07bcad13a2f7be493133 Mon Sep 17 00:00:00 2001
From: Masayuki Tanaka <masayuki0812@mac.com>
Date: Mon, 1 Jan 2018 22:46:59 +0900
Subject: [PATCH] Fix line chart for d3 v4

---
 htdocs/samples/chart_area.html |  2 +-
 htdocs/samples/simple.html     |  2 +-
 package.json                   |  3 ++-
 src/arc.js                     |  6 +++---
 src/axis.js                    | 31 +++++++++++++++++--------------
 src/color.js                   |  2 +-
 src/core.js                    | 25 ++++++++++++-------------
 src/interaction.js             | 24 ++++++++++--------------
 src/scale.js                   |  2 +-
 src/shape.js                   | 30 +++++++++++++++++++++++++++---
 src/shape.line.js              | 21 +++++++++++----------
 src/subchart.js                | 14 ++++++++++++--
 src/zoom.js                    |  6 +++---
 13 files changed, 101 insertions(+), 67 deletions(-)
diff --git a/htdocs/samples/chart_area.html b/htdocs/samples/chart_area.html
index 04ec6bd..fea0460 100644
--- a/htdocs/samples/chart_area.html
+++ b/htdocs/samples/chart_area.html
@@ -14,7 +14,7 @@
     <h3>+/- vaulues</h3>
     <div id="chart5"></div>
 
-    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 
diff --git a/htdocs/samples/simple.html b/htdocs/samples/simple.html
index 0aeb681..862cc6e 100644
--- a/htdocs/samples/simple.html
+++ b/htdocs/samples/simple.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({
diff --git a/package.json b/package.json
index 20af2ff..8a7bfac 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "watch": "nodemon -e js,scss --watch src -x 'npm run build:js:rollup && npm run build:css:sass'",
     "watch:js": "nodemon -e js --watch src --ignore src/scss -x 'npm run build:js:rollup'",
     "watch:css": "nodemon -e scss --watch src -x 'npm run build:css:sass'",
+    "test:only": "karma start karma.conf.js",
     "test": "npm run build && npm run lint && karma start karma.conf.js",
     "dist": "npm run build",
     "codecov": "codecov"
@@ -38,7 +39,7 @@
   "gitHead": "84e03109d9a590f9c8ef687c03d751f666080c6f",
   "readmeFilename": "README.md",
   "dependencies": {
-    "d3": "~3.5.0"
+    "d3": "~4.12.0"
   },
   "devDependencies": {
     "babel-plugin-external-helpers": "^6.22.0",
diff --git a/src/arc.js b/src/arc.js
index 7b5c16e..939950b 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..05fcea0 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 = internal.d3.scaleLinear();
     internal.range;
     internal.orient = "bottom";
     internal.innerTickSize = 6;
@@ -103,7 +103,7 @@ c3_axis_internal_fn.updateTickTextCharSize = function (tick) {
     return size;
 };
 c3_axis_internal_fn.transitionise = function (selection) {
-    return this.params.withoutTransition ? selection : this.d3.transition(selection);
+    return this.params.withoutTransition ? selection : selection.transition();
 };
 c3_axis_internal_fn.isVertical = function () {
     return this.orient === 'left' || this.orient === 'right';
@@ -198,14 +198,16 @@ c3_axis_internal_fn.generateAxis = function () {
             var scale0 = this.__chart__ || internal.scale,
                 scale1 = this.__chart__ = internal.copyScale();
 
-            var ticks = internal.tickValues ? internal.tickValues : internal.generateTicks(scale1),
-                tick = g.selectAll(".tick").data(ticks, scale1),
-                tickEnter = tick.enter().insert("g", ".domain").attr("class", "tick").style("opacity", 1e-6),
+            var ticksValues = internal.tickValues ? internal.tickValues : internal.generateTicks(scale1),
+                ticks = g.selectAll(".tick").data(ticksValues, scale1),
+                tickEnter = ticks.enter().insert("g", ".domain").attr("class", "tick").style("opacity", 1e-6),
                 // MEMO: No exit transition. The reason is this transition affects max tick width calculation because old tick will be included in the ticks.
-                tickExit = tick.exit().remove(),
-                tickUpdate = internal.transitionise(tick).style("opacity", 1),
+                tickExit = ticks.exit().remove(),
+                tickUpdate = tickEnter.merge(ticks),
                 tickTransform, tickX, tickY;
 
+            internal.transitionise(tickUpdate).style('opacity', 1);
+
             if (params.isCategory) {
                 internal.tickOffset = Math.ceil((scale1(1) - scale1(0)) / 2);
                 tickX = internal.tickCentered ? 0 : internal.tickOffset;
@@ -222,16 +224,17 @@ c3_axis_internal_fn.generateAxis = function () {
             internal.updateTickTextCharSize(g.select('.tick'));
 
             var lineUpdate = tickUpdate.select("line"),
-                textUpdate = tickUpdate.select("text"),
-                tspanUpdate = tick.select("text").selectAll('tspan')
-                    .data(function (d, i) { return internal.tspanData(d, i, ticks, scale1); });
+                textUpdate = tickUpdate.select("text");
 
-            tspanUpdate.enter().append('tspan');
-            tspanUpdate.exit().remove();
-            tspanUpdate.text(function (d) { return d.splitted; });
+            var tspans = tickUpdate.selectAll('text').selectAll('tspan').data(function (d, i) {
+                    return internal.tspanData(d, i, ticks, scale1);
+                }),
+                tspanEnter = tspans.enter().append('tspan'),
+                tspanExit = tspans.exit().remove(),
+                tspanUpdate = tspanEnter.merge(tspans).text(function (d) { return d.splitted; });
 
             var path = g.selectAll(".domain").data([ 0 ]),
-                pathUpdate = (path.enter().append("path").attr("class", "domain"), internal.transitionise(path));
+                pathUpdate = path.enter().append("path").merge(path).attr("class", "domain");
 
             // TODO: each attr should be one function and change its behavior by internal.orient, probably
             switch (internal.orient) {
diff --git a/src/color.js b/src/color.js
index 4585d85..9b03830 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.schemeCategory10,
         callback = config.data_color,
         ids = [];
 
diff --git a/src/core.js b/src/core.js
index f2a48e1..7e6b04b 100644
--- a/src/core.js
+++ b/src/core.js
@@ -107,19 +107,18 @@ 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;
-    $$.defaultAxisTimeFormat = $$.axisTimeFormat.multi([
-        [".%L", function (d) { return d.getMilliseconds(); }],
-        [":%S", function (d) { return d.getSeconds(); }],
-        ["%I:%M", function (d) { return d.getMinutes(); }],
-        ["%I %p", function (d) { return d.getHours(); }],
-        ["%-m/%-d", function (d) { return d.getDay() && d.getDate() !== 1; }],
-        ["%-m/%-d", function (d) { return d.getDate() !== 1; }],
-        ["%-m/%-d", function (d) { return d.getMonth(); }],
-        ["%Y/%-m/%-d", function () { return true; }]
-    ]);
-
+    $$.dataTimeFormat = config.data_xLocaltime ? d3.timeFormat : d3.utcFormat;
+    $$.axisTimeFormat = config.axis_x_localtime ? d3.timeFormat : d3.utcFormat;
+    $$.defaultAxisTimeFormat = function (date) {
+        if (date.getMilliseconds()) { return d3.timeFormat(".%L")(date); }
+        if (date.getSeconds()) { return d3.timeFormat(":%S")(date); }
+        if (date.getMinutes()) { return d3.timeFormat("%I:%M")(date); }
+        if (date.getHours()) { return d3.timeFormat("%I %p")(date); }
+        if (date.getDay() && date.getDate() !== 1) { return d3.timeFormat("%-m/%-d")(date); }
+        if (date.getDate() !== 1) { return d3.timeFormat("%-m/%-d")(date); }
+        if (date.getMonth()) { return d3.timeFormat("%-m/%-d")(date); }
+        return d3.timeFormat("%Y/%-m/%-d")(date);
+    };
     $$.hiddenTargetIds = [];
     $$.hiddenLegendIds = [];
     $$.focusedTargetIds = [];
diff --git a/src/interaction.js b/src/interaction.js
index a51f6de..37d2e38 100644
--- a/src/interaction.js
+++ b/src/interaction.js
@@ -9,7 +9,7 @@ c3_chart_internal_fn.initEventRect = function () {
 };
 c3_chart_internal_fn.redrawEventRect = function () {
     var $$ = this, config = $$.config,
-        eventRectUpdate, maxDataCountTarget,
+        eventRectEnter, eventRectUpdate, maxDataCountTarget,
         isMultipleX = $$.isMultipleX();
 
     // rects for mouseover
@@ -21,29 +21,25 @@ c3_chart_internal_fn.redrawEventRect = function () {
     // clear old rects
     eventRects.selectAll('.' + CLASS.eventRect).remove();
 
-    // open as public variable
-    $$.eventRect = eventRects.selectAll('.' + CLASS.eventRect);
-
     if (isMultipleX) {
-        eventRectUpdate = $$.eventRect.data([0]);
+        $$.eventRect = eventRects.selectAll('.' + CLASS.eventRect).data([0]);
         // enter : only one rect will be added
-        $$.generateEventRectsForMultipleXs(eventRectUpdate.enter());
+        eventRectEnter = $$.generateEventRectsForMultipleXs($$.eventRect.enter());
         // update
-        $$.updateEventRect(eventRectUpdate);
+        $$.updateEventRect(eventRectEnter.merge($$.eventRect));
         // exit : not needed because always only one rect exists
     }
     else {
         // Set data and update $$.eventRect
         maxDataCountTarget = $$.getMaxDataCountTarget($$.data.targets);
         eventRects.datum(maxDataCountTarget ? maxDataCountTarget.values : []);
-        $$.eventRect = eventRects.selectAll('.' + CLASS.eventRect);
-        eventRectUpdate = $$.eventRect.data(function (d) { return d; });
+        $$.eventRect = eventRects.selectAll('.' + CLASS.eventRect).data(function (d) { return d; });
         // enter
-        $$.generateEventRectsForSingleX(eventRectUpdate.enter());
+        eventRectEnter = $$.generateEventRectsForSingleX($$.eventRect.enter());
         // update
-        $$.updateEventRect(eventRectUpdate);
+        $$.updateEventRect(eventRectEnter.merge($$.eventRect));
         // exit
-        eventRectUpdate.exit().remove();
+        $$.eventRect.exit().remove();
     }
 };
 c3_chart_internal_fn.updateEventRect = function (eventRectUpdate) {
@@ -113,7 +109,7 @@ c3_chart_internal_fn.updateEventRect = function (eventRectUpdate) {
 };
 c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
     var $$ = this, d3 = $$.d3, config = $$.config;
-    eventRectEnter.append("rect")
+    return eventRectEnter.append("rect")
         .attr("class", $$.classEvent.bind($$))
         .style("cursor", config.data_selection_enabled && config.data_selection_grouped ? "pointer" : null)
         .on('mouseover', function (d) {
@@ -238,7 +234,7 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
         $$.unexpandBars();
     }
 
-    eventRectEnter.append('rect')
+    return eventRectEnter.append('rect')
         .attr('x', 0)
         .attr('y', 0)
         .attr('width', $$.width)
diff --git a/src/scale.js b/src/scale.js
index 85fa792..b23ab50 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.time.scale() : this.d3.scaleLinear()).range([min, max]);
 };
 c3_chart_internal_fn.getX = function (min, max, domain, offset) {
     var $$ = this,
diff --git a/src/shape.js b/src/shape.js
index 930b422..8afe738 100644
--- a/src/shape.js
+++ b/src/shape.js
@@ -80,7 +80,31 @@ c3_chart_internal_fn.isWithinShape = function (that, d) {
 
 
 c3_chart_internal_fn.getInterpolate = function (d) {
-    var $$ = this,
-        interpolation = $$.isInterpolationType($$.config.spline_interpolation_type) ? $$.config.spline_interpolation_type : 'cardinal';
-    return $$.isSplineType(d) ? interpolation : $$.isStepType(d) ? $$.config.line_step_type : "linear";
+    var $$ = this, d3 = $$.d3,
+        types = {
+            'linear': d3.curveLinear,
+            'linear-closed': d3.curveLinearClosed,
+            'basis': d3.curveBasis,
+            'basis-open': d3.curveBasisOpen,
+            'basis-closed': d3.curveBasisClosed,
+            'bundle': d3.curveBundle,
+            'cardinal': d3.curveCardinal,
+            'cardinal-open': d3.curveCardinalOpen,
+            'cardinal-closed': d3.curveCardinalClosed,
+            'monotone-x': d3.curveMonotoneX,
+            'monotone-y': d3.curveMonotoneY,
+            'step': d3.curveStep,
+        },
+        type;
+
+    if ($$.isSplineType(d)) {
+        type = types[$$.config.spline_interpolation_type] || types['cardinal'];
+    }
+    else if ($$.isStepType(d)) {
+        type = types[$$.config.line_step_type];
+    }
+    else {
+        type = types["linear"];
+    }
+    return type;
 };
diff --git a/src/shape.line.js b/src/shape.line.js
index bdb03c7..d3ade86 100644
--- a/src/shape.line.js
+++ b/src/shape.line.js
@@ -47,9 +47,10 @@ c3_chart_internal_fn.updateLine = function (durationForExit) {
     var $$ = this;
     $$.mainLine = $$.main.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
         .data($$.lineData.bind($$));
-    $$.mainLine.enter().append('path')
+    $$.mainLine = $$.mainLine.enter().append('path')
         .attr('class', $$.classLine.bind($$))
-        .style("stroke", $$.color);
+        .style("stroke", $$.color)
+        .merge($$.mainLine);
     $$.mainLine
         .style("opacity", $$.initialOpacity.bind($$))
         .style('shape-rendering', function (d) { return $$.isStepType(d) ? 'crispEdges' : ''; })
@@ -68,7 +69,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); },
@@ -86,7 +87,7 @@ c3_chart_internal_fn.generateDrawLine = function (lineIndices, isSub) {
                 path = $$.lineWithRegions(values, x, y, config.data_regions[d.id]);
             } else {
                 if ($$.isStepType(d)) { values = $$.convertValuesToStep(values); }
-                path = line.interpolate($$.getInterpolate(d))(values);
+                path = line.curve($$.getInterpolate(d))(values);
             }
         } else {
             if (values[0]) {
@@ -224,10 +225,10 @@ c3_chart_internal_fn.updateArea = function (durationForExit) {
     var $$ = this, d3 = $$.d3;
     $$.mainArea = $$.main.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
         .data($$.lineData.bind($$));
-    $$.mainArea.enter().append('path')
+    $$.mainArea = $$.mainArea.enter().append('path')
         .attr("class", $$.classArea.bind($$))
         .style("fill", $$.color)
-        .style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; });
+        .style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; }).merge($$.mainArea);
     $$.mainArea
         .style("opacity", $$.orgAreaOpacity);
     $$.mainArea.exit().transition().duration(durationForExit)
@@ -243,7 +244,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); },
@@ -264,7 +265,7 @@ c3_chart_internal_fn.generateDrawArea = function (areaIndices, isSub) {
             x0 = 0, y0 = 0, path;
         if ($$.isAreaType(d)) {
             if ($$.isStepType(d)) { values = $$.convertValuesToStep(values); }
-            path = area.interpolate($$.getInterpolate(d))(values);
+            path = area.curve($$.getInterpolate(d))(values);
         } else {
             if (values[0]) {
                 x0 = $$.x(values[0].x);
@@ -308,10 +309,10 @@ c3_chart_internal_fn.updateCircle = function () {
     var $$ = this;
     $$.mainCircle = $$.main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle)
         .data($$.lineOrScatterData.bind($$));
-    $$.mainCircle.enter().append("circle")
+    $$.mainCircle = $$.mainCircle.enter().append("circle")
         .attr("class", $$.classCircle.bind($$))
         .attr("r", $$.pointR.bind($$))
-        .style("fill", $$.color);
+        .style("fill", $$.color).merge($$.mainCircle);
     $$.mainCircle
         .style("opacity", $$.initialOpacityForCircle.bind($$));
     $$.mainCircle.exit().remove();
diff --git a/src/subchart.js b/src/subchart.js
index a4dacf7..b0bed42 100644
--- a/src/subchart.js
+++ b/src/subchart.js
@@ -4,13 +4,23 @@ 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;
     };
+    // TODO: fix
     $$.brush.scale = function (scale) {
-        return $$.config.axis_rotated ? this.y(scale) : this.x(scale);
+        if ($$.config.axis_rotated) {
+            d3.brushY().extent([[0, scale.range()[0]], [40, scale.range()[1]]]);
+        }
+        else {
+            d3.brushX().extent([[scale.range()[0], 0], [scale.range()[1], 40]]);
+        }
+    };
+    // TODO: fix
+    $$.brush.empty = function () {
+        return true;
     };
 };
 c3_chart_internal_fn.initSubchart = function () {
diff --git a/src/zoom.js b/src/zoom.js
index fea6bda..50f9a0e 100644
--- a/src/zoom.js
+++ b/src/zoom.js
@@ -5,8 +5,8 @@ import { diffDomain } from './util';
 c3_chart_internal_fn.initZoom = function () {
     var $$ = this, d3 = $$.d3, config = $$.config, startEvent;
 
-    $$.zoom = d3.behavior.zoom()
-        .on("zoomstart", function () {
+    $$.zoom = d3.zoom()
+        .on("start", function () {
             startEvent = d3.event.sourceEvent;
             $$.zoom.altDomain = d3.event.sourceEvent.altKey ? $$.x.orgDomain() : null;
             config.zoom_onzoomstart.call($$.api, d3.event.sourceEvent);
@@ -14,7 +14,7 @@ c3_chart_internal_fn.initZoom = function () {
         .on("zoom", function () {
             $$.redrawForZoom.call($$);
         })
-        .on('zoomend', function () {
+        .on('end', function () {
             var event = d3.event.sourceEvent;
             // if click, do nothing. otherwise, click interaction will be canceled.
             if (event && startEvent.clientX === event.clientX && startEvent.clientY === event.clientY) {
