chore(version): bump to v0.6.7

.bmp.yml

@@ -1,5 +1,5 @@
 ---
-version: 0.6.6
+version: 0.6.7
 commit: 'chore(version): bump to v%.%.%'
 files:
   src/core.js: 'version: "%.%.%"'

c3.css

@@ -1,112 +1,138 @@
 /*-- Chart --*/
 .c3 svg {
   font: 10px sans-serif;
-  -webkit-tap-highlight-color: transparent; }
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
 
 .c3 path, .c3 line {
   fill: none;
-  stroke: #000; }
+  stroke: #000;
+}
 
 .c3 text {
   -webkit-user-select: none;
   -moz-user-select: none;
-  user-select: none; }
+  user-select: none;
+}
 
 .c3-legend-item-tile,
 .c3-xgrid-focus,
 .c3-ygrid,
 .c3-event-rect,
 .c3-bars path {
-  shape-rendering: crispEdges; }
+  shape-rendering: crispEdges;
+}
 
 .c3-chart-arc path {
-  stroke: #fff; }
+  stroke: #fff;
+}
 
 .c3-chart-arc rect {
   stroke: white;
-  stroke-width: 1; }
+  stroke-width: 1;
+}
 
 .c3-chart-arc text {
   fill: #fff;
-  font-size: 13px; }
+  font-size: 13px;
+}
 
 /*-- Axis --*/
 /*-- Grid --*/
 .c3-grid line {
-  stroke: #aaa; }
+  stroke: #aaa;
+}
 
 .c3-grid text {
-  fill: #aaa; }
+  fill: #aaa;
+}
 
 .c3-xgrid, .c3-ygrid {
-  stroke-dasharray: 3 3; }
+  stroke-dasharray: 3 3;
+}
 
 /*-- Text on Chart --*/
 .c3-text.c3-empty {
   fill: #808080;
-  font-size: 2em; }
+  font-size: 2em;
+}
 
 /*-- Line --*/
 .c3-line {
-  stroke-width: 1px; }
+  stroke-width: 1px;
+}
 
 /*-- Point --*/
 .c3-circle._expanded_ {
   stroke-width: 1px;
-  stroke: white; }
+  stroke: white;
+}
 
 .c3-selected-circle {
   fill: white;
-  stroke-width: 2px; }
+  stroke-width: 2px;
+}
 
 /*-- Bar --*/
 .c3-bar {
-  stroke-width: 0; }
+  stroke-width: 0;
+}
 
 .c3-bar._expanded_ {
   fill-opacity: 1;
-  fill-opacity: 0.75; }
+  fill-opacity: 0.75;
+}
 
 /*-- Focus --*/
 .c3-target.c3-focused {
-  opacity: 1; }
+  opacity: 1;
+}
 
 .c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
-  stroke-width: 2px; }
+  stroke-width: 2px;
+}
 
 .c3-target.c3-defocused {
-  opacity: 0.3 !important; }
+  opacity: 0.3 !important;
+}
 
 /*-- Region --*/
 .c3-region {
   fill: steelblue;
-  fill-opacity: .1; }
+  fill-opacity: 0.1;
+}
 
 /*-- Brush --*/
 .c3-brush .extent {
-  fill-opacity: .1; }
+  fill-opacity: 0.1;
+}
 
 /*-- Select - Drag --*/
 /*-- Legend --*/
 .c3-legend-item {
-  font-size: 12px; }
+  font-size: 12px;
+}
 
 .c3-legend-item-hidden {
-  opacity: 0.15; }
+  opacity: 0.15;
+}
 
 .c3-legend-background {
   opacity: 0.75;
   fill: white;
   stroke: lightgray;
-  stroke-width: 1; }
+  stroke-width: 1;
+}
 
 /*-- Title --*/
 .c3-title {
-  font: 14px sans-serif; }
+  font: 14px sans-serif;
+}
 
 /*-- Tooltip --*/
 .c3-tooltip-container {
-  z-index: 10; }
+  z-index: 10;
+}
 
 .c3-tooltip {
   border-collapse: collapse;
@@ -116,63 +142,93 @@
   -webkit-box-shadow: 7px 7px 12px -9px #777777;
   -moz-box-shadow: 7px 7px 12px -9px #777777;
   box-shadow: 7px 7px 12px -9px #777777;
-  opacity: 0.9; }
+  opacity: 0.9;
+}
 
 .c3-tooltip tr {
-  border: 1px solid #CCC; }
+  border: 1px solid #CCC;
+}
 
 .c3-tooltip th {
   background-color: #aaa;
   font-size: 14px;
   padding: 2px 5px;
   text-align: left;
-  color: #FFF; }
+  color: #FFF;
+}
 
 .c3-tooltip td {
   font-size: 13px;
   padding: 3px 6px;
   background-color: #fff;
-  border-left: 1px dotted #999; }
+  border-left: 1px dotted #999;
+}
 
 .c3-tooltip td > span {
   display: inline-block;
   width: 10px;
   height: 10px;
-  margin-right: 6px; }
+  margin-right: 6px;
+}
 
 .c3-tooltip td.value {
-  text-align: right; }
+  text-align: right;
+}
 
 /*-- Area --*/
 .c3-area {
   stroke-width: 0;
-  opacity: 0.2; }
+  opacity: 0.2;
+}
 
 /*-- Arc --*/
 .c3-chart-arcs-title {
   dominant-baseline: middle;
-  font-size: 1.3em; }
+  font-size: 1.3em;
+}
 
 .c3-chart-arcs .c3-chart-arcs-background {
   fill: #e0e0e0;
-  stroke: #FFF; }
+  stroke: #FFF;
+}
 
 .c3-chart-arcs .c3-chart-arcs-gauge-unit {
   fill: #000;
-  font-size: 16px; }
+  font-size: 16px;
+}
 
 .c3-chart-arcs .c3-chart-arcs-gauge-max {
-  fill: #777; }
+  fill: #777;
+}
 
 .c3-chart-arcs .c3-chart-arcs-gauge-min {
-  fill: #777; }
+  fill: #777;
+}
 
 .c3-chart-arc .c3-gauge-value {
   fill: #000;
-  /*  font-size: 28px !important;*/ }
+  /*  font-size: 28px !important;*/
+}
 
 .c3-chart-arc.c3-target g path {
-  opacity: 1; }
+  opacity: 1;
+}
 
 .c3-chart-arc.c3-target.c3-focused g path {
-  opacity: 1; }
+  opacity: 1;
+}
+
+/*-- Zoom --*/
+.c3-drag-zoom.enabled {
+  pointer-events: all !important;
+  visibility: visible;
+}
+
+.c3-drag-zoom.disabled {
+  pointer-events: none !important;
+  visibility: hidden;
+}
+
+.c3-drag-zoom .extent {
+  fill-opacity: 0.1;
+}

c3.js

@@ -1,4 +1,4 @@
-/* @license C3.js v0.6.6 | (c) C3 Team and other contributors | http://c3js.org/ */
+/* @license C3.js v0.6.7 | (c) C3 Team and other contributors | http://c3js.org/ */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
     typeof define === 'function' && define.amd ? define(factory) :
@@ -478,6 +478,7 @@
         eventRectsMultiple: 'c3-event-rects-multiple',
         zoomRect: 'c3-zoom-rect',
         brush: 'c3-brush',
+        dragZoom: 'c3-drag-zoom',
         focused: 'c3-focused',
         defocused: 'c3-defocused',
         region: 'c3-region',
@@ -1008,7 +1009,7 @@
     };
 
     var c3 = {
-        version: "0.6.6",
+        version: "0.6.7",
         chart: {
             fn: Chart.prototype,
             internal: {
@@ -1240,6 +1241,9 @@
         if ($$.initPie) {
             $$.initPie();
         }
+        if ($$.initDragZoom) {
+            $$.initDragZoom();
+        }
         if ($$.initSubchart) {
             $$.initSubchart();
         }
@@ -5465,6 +5469,8 @@
             resize_auto: true,
             zoom_enabled: false,
             zoom_initialRange: undefined,
+            zoom_type: 'scroll',
+            zoom_disableDefaultBehavior: false,
             zoom_privileged: false,
             zoom_rescale: false,
             zoom_onzoom: function zoom_onzoom() {},
@@ -9429,6 +9435,10 @@
             startEvent;
 
         $$.zoom = d3.zoom().on("start", function () {
+            if (config.zoom_type !== 'scroll') {
+                return;
+            }
+
             var e = d3.event.sourceEvent;
             if (e && e.type === "brush") {
                 return;
@@ -9436,12 +9446,23 @@
             startEvent = e;
             config.zoom_onzoomstart.call($$.api, e);
         }).on("zoom", function () {
+            if (config.zoom_type !== 'scroll') {
+                return;
+            }
+
             var e = d3.event.sourceEvent;
             if (e && e.type === "brush") {
                 return;
             }
-            $$.redrawForZoom.call($$);
+
+            $$.redrawForZoom();
+
+            config.zoom_onzoom.call($$.api, $$.x.orgDomain());
         }).on('end', function () {
+            if (config.zoom_type !== 'scroll') {
+                return;
+            }
+
             var e = d3.event.sourceEvent;
             if (e && e.type === "brush") {
                 return;
@@ -9475,6 +9496,51 @@
         return $$.d3.zoomIdentity.scale($$.width / (s[1] - s[0])).translate(-s[0], 0);
     };
 
+    ChartInternal.prototype.initDragZoom = function () {
+        var $$ = this;
+        var d3 = $$.d3;
+        var config = $$.config;
+        var context = $$.context = $$.svg;
+        var brushXPos = $$.margin.left + 20.5;
+        var brushYPos = $$.margin.top + 0.5;
+
+        if (!(config.zoom_type === 'drag' && config.zoom_enabled)) {
+            return;
+        }
+
+        var getZoomedDomain = function getZoomedDomain(selection) {
+            return selection && selection.map(function (x) {
+                return $$.x.invert(x);
+            });
+        };
+
+        var brush = $$.dragZoomBrush = d3.brushX().on("start", function () {
+            $$.api.unzoom();
+
+            $$.svg.select("." + CLASS.dragZoom).classed("disabled", false);
+
+            config.zoom_onzoomstart.call($$.api, d3.event.sourceEvent);
+        }).on("brush", function () {
+            config.zoom_onzoom.call($$.api, getZoomedDomain(d3.event.selection));
+        }).on("end", function () {
+            if (d3.event.selection == null) {
+                return;
+            }
+
+            var zoomedDomain = getZoomedDomain(d3.event.selection);
+
+            if (!config.zoom_disableDefaultBehavior) {
+                $$.api.zoom(zoomedDomain);
+            }
+
+            $$.svg.select("." + CLASS.dragZoom).classed("disabled", true);
+
+            config.zoom_onzoomend.call($$.api, zoomedDomain);
+        });
+
+        context.append("g").classed(CLASS.dragZoom, true).attr("clip-path", $$.clipPath).attr("transform", "translate(" + brushXPos + "," + brushYPos + ")").call(brush);
+    };
+
     ChartInternal.prototype.getZoomDomain = function () {
         var $$ = this,
             config = $$.config,
@@ -9498,9 +9564,14 @@
 
         zoom.update();
 
+        if (config.zoom_disableDefaultBehavior) {
+            return;
+        }
+
         if ($$.isCategorized() && x.orgDomain()[0] === $$.orgXDomain[0]) {
             x.domain([$$.orgXDomain[0] - 1e-10, x.orgDomain()[1]]);
         }
+
         $$.redraw({
             withTransition: false,
             withY: config.zoom_rescale,
@@ -9508,10 +9579,10 @@
             withEventRect: false,
             withDimension: false
         });
+
         if (d3.event.sourceEvent && d3.event.sourceEvent.type === 'mousemove') {
             $$.cancelClick = true;
         }
-        config.zoom_onzoom.call($$.api, x.orgDomain());
     };
 
     return c3;

c3.min.css

@@ -1 +1 @@
-.c3 svg{font:10px sans-serif;-webkit-tap-highlight-color:transparent}.c3 line,.c3 path{fill:none;stroke:#000}.c3 text{-webkit-user-select:none;-moz-user-select:none;user-select:none}.c3-bars path,.c3-event-rect,.c3-legend-item-tile,.c3-xgrid-focus,.c3-ygrid{shape-rendering:crispEdges}.c3-chart-arc path{stroke:#fff}.c3-chart-arc rect{stroke:#fff;stroke-width:1}.c3-chart-arc text{fill:#fff;font-size:13px}.c3-grid line{stroke:#aaa}.c3-grid text{fill:#aaa}.c3-xgrid,.c3-ygrid{stroke-dasharray:3 3}.c3-text.c3-empty{fill:grey;font-size:2em}.c3-line{stroke-width:1px}.c3-circle._expanded_{stroke-width:1px;stroke:#fff}.c3-selected-circle{fill:#fff;stroke-width:2px}.c3-bar{stroke-width:0}.c3-bar._expanded_{fill-opacity:1;fill-opacity:.75}.c3-target.c3-focused{opacity:1}.c3-target.c3-focused path.c3-line,.c3-target.c3-focused path.c3-step{stroke-width:2px}.c3-target.c3-defocused{opacity:.3!important}.c3-region{fill:#4682b4;fill-opacity:.1}.c3-brush .extent{fill-opacity:.1}.c3-legend-item{font-size:12px}.c3-legend-item-hidden{opacity:.15}.c3-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.c3-title{font:14px sans-serif}.c3-tooltip-container{z-index:10}.c3-tooltip{border-collapse:collapse;border-spacing:0;background-color:#fff;empty-cells:show;-webkit-box-shadow:7px 7px 12px -9px #777;-moz-box-shadow:7px 7px 12px -9px #777;box-shadow:7px 7px 12px -9px #777;opacity:.9}.c3-tooltip tr{border:1px solid #ccc}.c3-tooltip th{background-color:#aaa;font-size:14px;padding:2px 5px;text-align:left;color:#fff}.c3-tooltip td{font-size:13px;padding:3px 6px;background-color:#fff;border-left:1px dotted #999}.c3-tooltip td>span{display:inline-block;width:10px;height:10px;margin-right:6px}.c3-tooltip td.value{text-align:right}.c3-area{stroke-width:0;opacity:.2}.c3-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}.c3-chart-arcs .c3-chart-arcs-background{fill:#e0e0e0;stroke:#fff}.c3-chart-arcs .c3-chart-arcs-gauge-unit{fill:#000;font-size:16px}.c3-chart-arcs .c3-chart-arcs-gauge-max{fill:#777}.c3-chart-arcs .c3-chart-arcs-gauge-min{fill:#777}.c3-chart-arc .c3-gauge-value{fill:#000}.c3-chart-arc.c3-target g path{opacity:1}.c3-chart-arc.c3-target.c3-focused g path{opacity:1}
+.c3 svg{font:10px sans-serif;-webkit-tap-highlight-color:transparent}.c3 line,.c3 path{fill:none;stroke:#000}.c3 text{-webkit-user-select:none;-moz-user-select:none;user-select:none}.c3-bars path,.c3-event-rect,.c3-legend-item-tile,.c3-xgrid-focus,.c3-ygrid{shape-rendering:crispEdges}.c3-chart-arc path{stroke:#fff}.c3-chart-arc rect{stroke:#fff;stroke-width:1}.c3-chart-arc text{fill:#fff;font-size:13px}.c3-grid line{stroke:#aaa}.c3-grid text{fill:#aaa}.c3-xgrid,.c3-ygrid{stroke-dasharray:3 3}.c3-text.c3-empty{fill:grey;font-size:2em}.c3-line{stroke-width:1px}.c3-circle._expanded_{stroke-width:1px;stroke:#fff}.c3-selected-circle{fill:#fff;stroke-width:2px}.c3-bar{stroke-width:0}.c3-bar._expanded_{fill-opacity:1;fill-opacity:.75}.c3-target.c3-focused{opacity:1}.c3-target.c3-focused path.c3-line,.c3-target.c3-focused path.c3-step{stroke-width:2px}.c3-target.c3-defocused{opacity:.3!important}.c3-region{fill:#4682b4;fill-opacity:.1}.c3-brush .extent{fill-opacity:.1}.c3-legend-item{font-size:12px}.c3-legend-item-hidden{opacity:.15}.c3-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.c3-title{font:14px sans-serif}.c3-tooltip-container{z-index:10}.c3-tooltip{border-collapse:collapse;border-spacing:0;background-color:#fff;empty-cells:show;-webkit-box-shadow:7px 7px 12px -9px #777;-moz-box-shadow:7px 7px 12px -9px #777;box-shadow:7px 7px 12px -9px #777;opacity:.9}.c3-tooltip tr{border:1px solid #ccc}.c3-tooltip th{background-color:#aaa;font-size:14px;padding:2px 5px;text-align:left;color:#fff}.c3-tooltip td{font-size:13px;padding:3px 6px;background-color:#fff;border-left:1px dotted #999}.c3-tooltip td>span{display:inline-block;width:10px;height:10px;margin-right:6px}.c3-tooltip td.value{text-align:right}.c3-area{stroke-width:0;opacity:.2}.c3-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}.c3-chart-arcs .c3-chart-arcs-background{fill:#e0e0e0;stroke:#fff}.c3-chart-arcs .c3-chart-arcs-gauge-unit{fill:#000;font-size:16px}.c3-chart-arcs .c3-chart-arcs-gauge-max{fill:#777}.c3-chart-arcs .c3-chart-arcs-gauge-min{fill:#777}.c3-chart-arc .c3-gauge-value{fill:#000}.c3-chart-arc.c3-target g path{opacity:1}.c3-chart-arc.c3-target.c3-focused g path{opacity:1}.c3-drag-zoom.enabled{pointer-events:all!important;visibility:visible}.c3-drag-zoom.disabled{pointer-events:none!important;visibility:hidden}.c3-drag-zoom .extent{fill-opacity:.1}

component.json

@@ -2,7 +2,7 @@
   "name": "c3",
   "repo": "masayuki0812/c3",
   "description": "A D3-based reusable chart library",
-  "version": "0.6.6",
+  "version": "0.6.7",
   "keywords": [],
   "dependencies": {
     "mbostock/d3": "v5.0.0"

docs/css/c3.css

@@ -1,112 +1,138 @@
 /*-- Chart --*/
 .c3 svg {
   font: 10px sans-serif;
-  -webkit-tap-highlight-color: transparent; }
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
 
 .c3 path, .c3 line {
   fill: none;
-  stroke: #000; }
+  stroke: #000;
+}
 
 .c3 text {
   -webkit-user-select: none;
   -moz-user-select: none;
-  user-select: none; }
+  user-select: none;
+}
 
 .c3-legend-item-tile,
 .c3-xgrid-focus,
 .c3-ygrid,
 .c3-event-rect,
 .c3-bars path {
-  shape-rendering: crispEdges; }
+  shape-rendering: crispEdges;
+}
 
 .c3-chart-arc path {
-  stroke: #fff; }
+  stroke: #fff;
+}
 
 .c3-chart-arc rect {
   stroke: white;
-  stroke-width: 1; }
+  stroke-width: 1;
+}
 
 .c3-chart-arc text {
   fill: #fff;
-  font-size: 13px; }
+  font-size: 13px;
+}
 
 /*-- Axis --*/
 /*-- Grid --*/
 .c3-grid line {
-  stroke: #aaa; }
+  stroke: #aaa;
+}
 
 .c3-grid text {
-  fill: #aaa; }
+  fill: #aaa;
+}
 
 .c3-xgrid, .c3-ygrid {
-  stroke-dasharray: 3 3; }
+  stroke-dasharray: 3 3;
+}
 
 /*-- Text on Chart --*/
 .c3-text.c3-empty {
   fill: #808080;
-  font-size: 2em; }
+  font-size: 2em;
+}
 
 /*-- Line --*/
 .c3-line {
-  stroke-width: 1px; }
+  stroke-width: 1px;
+}
 
 /*-- Point --*/
 .c3-circle._expanded_ {
   stroke-width: 1px;
-  stroke: white; }
+  stroke: white;
+}
 
 .c3-selected-circle {
   fill: white;
-  stroke-width: 2px; }
+  stroke-width: 2px;
+}
 
 /*-- Bar --*/
 .c3-bar {
-  stroke-width: 0; }
+  stroke-width: 0;
+}
 
 .c3-bar._expanded_ {
   fill-opacity: 1;
-  fill-opacity: 0.75; }
+  fill-opacity: 0.75;
+}
 
 /*-- Focus --*/
 .c3-target.c3-focused {
-  opacity: 1; }
+  opacity: 1;
+}
 
 .c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
-  stroke-width: 2px; }
+  stroke-width: 2px;
+}
 
 .c3-target.c3-defocused {
-  opacity: 0.3 !important; }
+  opacity: 0.3 !important;
+}
 
 /*-- Region --*/
 .c3-region {
   fill: steelblue;
-  fill-opacity: .1; }
+  fill-opacity: 0.1;
+}
 
 /*-- Brush --*/
 .c3-brush .extent {
-  fill-opacity: .1; }
+  fill-opacity: 0.1;
+}
 
 /*-- Select - Drag --*/
 /*-- Legend --*/
 .c3-legend-item {
-  font-size: 12px; }
+  font-size: 12px;
+}
 
 .c3-legend-item-hidden {
-  opacity: 0.15; }
+  opacity: 0.15;
+}
 
 .c3-legend-background {
   opacity: 0.75;
   fill: white;
   stroke: lightgray;
-  stroke-width: 1; }
+  stroke-width: 1;
+}
 
 /*-- Title --*/
 .c3-title {
-  font: 14px sans-serif; }
+  font: 14px sans-serif;
+}
 
 /*-- Tooltip --*/
 .c3-tooltip-container {
-  z-index: 10; }
+  z-index: 10;
+}
 
 .c3-tooltip {
   border-collapse: collapse;
@@ -116,63 +142,93 @@
   -webkit-box-shadow: 7px 7px 12px -9px #777777;
   -moz-box-shadow: 7px 7px 12px -9px #777777;
   box-shadow: 7px 7px 12px -9px #777777;
-  opacity: 0.9; }
+  opacity: 0.9;
+}
 
 .c3-tooltip tr {
-  border: 1px solid #CCC; }
+  border: 1px solid #CCC;
+}
 
 .c3-tooltip th {
   background-color: #aaa;
   font-size: 14px;
   padding: 2px 5px;
   text-align: left;
-  color: #FFF; }
+  color: #FFF;
+}
 
 .c3-tooltip td {
   font-size: 13px;
   padding: 3px 6px;
   background-color: #fff;
-  border-left: 1px dotted #999; }
+  border-left: 1px dotted #999;
+}
 
 .c3-tooltip td > span {
   display: inline-block;
   width: 10px;
   height: 10px;
-  margin-right: 6px; }
+  margin-right: 6px;
+}
 
 .c3-tooltip td.value {
-  text-align: right; }
+  text-align: right;
+}
 
 /*-- Area --*/
 .c3-area {
   stroke-width: 0;
-  opacity: 0.2; }
+  opacity: 0.2;
+}
 
 /*-- Arc --*/
 .c3-chart-arcs-title {
   dominant-baseline: middle;
-  font-size: 1.3em; }
+  font-size: 1.3em;
+}
 
 .c3-chart-arcs .c3-chart-arcs-background {
   fill: #e0e0e0;
-  stroke: #FFF; }
+  stroke: #FFF;
+}
 
 .c3-chart-arcs .c3-chart-arcs-gauge-unit {
   fill: #000;
-  font-size: 16px; }
+  font-size: 16px;
+}
 
 .c3-chart-arcs .c3-chart-arcs-gauge-max {
-  fill: #777; }
+  fill: #777;
+}
 
 .c3-chart-arcs .c3-chart-arcs-gauge-min {
-  fill: #777; }
+  fill: #777;
+}
 
 .c3-chart-arc .c3-gauge-value {
   fill: #000;
-  /*  font-size: 28px !important;*/ }
+  /*  font-size: 28px !important;*/
+}
 
 .c3-chart-arc.c3-target g path {
-  opacity: 1; }
+  opacity: 1;
+}
 
 .c3-chart-arc.c3-target.c3-focused g path {
-  opacity: 1; }
+  opacity: 1;
+}
+
+/*-- Zoom --*/
+.c3-drag-zoom.enabled {
+  pointer-events: all !important;
+  visibility: visible;
+}
+
+.c3-drag-zoom.disabled {
+  pointer-events: none !important;
+  visibility: hidden;
+}
+
+.c3-drag-zoom .extent {
+  fill-opacity: 0.1;
+}

docs/css/c3.min.css

@@ -1 +1 @@
-.c3 svg{font:10px sans-serif;-webkit-tap-highlight-color:transparent}.c3 line,.c3 path{fill:none;stroke:#000}.c3 text{-webkit-user-select:none;-moz-user-select:none;user-select:none}.c3-bars path,.c3-event-rect,.c3-legend-item-tile,.c3-xgrid-focus,.c3-ygrid{shape-rendering:crispEdges}.c3-chart-arc path{stroke:#fff}.c3-chart-arc rect{stroke:#fff;stroke-width:1}.c3-chart-arc text{fill:#fff;font-size:13px}.c3-grid line{stroke:#aaa}.c3-grid text{fill:#aaa}.c3-xgrid,.c3-ygrid{stroke-dasharray:3 3}.c3-text.c3-empty{fill:grey;font-size:2em}.c3-line{stroke-width:1px}.c3-circle._expanded_{stroke-width:1px;stroke:#fff}.c3-selected-circle{fill:#fff;stroke-width:2px}.c3-bar{stroke-width:0}.c3-bar._expanded_{fill-opacity:1;fill-opacity:.75}.c3-target.c3-focused{opacity:1}.c3-target.c3-focused path.c3-line,.c3-target.c3-focused path.c3-step{stroke-width:2px}.c3-target.c3-defocused{opacity:.3!important}.c3-region{fill:#4682b4;fill-opacity:.1}.c3-brush .extent{fill-opacity:.1}.c3-legend-item{font-size:12px}.c3-legend-item-hidden{opacity:.15}.c3-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.c3-title{font:14px sans-serif}.c3-tooltip-container{z-index:10}.c3-tooltip{border-collapse:collapse;border-spacing:0;background-color:#fff;empty-cells:show;-webkit-box-shadow:7px 7px 12px -9px #777;-moz-box-shadow:7px 7px 12px -9px #777;box-shadow:7px 7px 12px -9px #777;opacity:.9}.c3-tooltip tr{border:1px solid #ccc}.c3-tooltip th{background-color:#aaa;font-size:14px;padding:2px 5px;text-align:left;color:#fff}.c3-tooltip td{font-size:13px;padding:3px 6px;background-color:#fff;border-left:1px dotted #999}.c3-tooltip td>span{display:inline-block;width:10px;height:10px;margin-right:6px}.c3-tooltip td.value{text-align:right}.c3-area{stroke-width:0;opacity:.2}.c3-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}.c3-chart-arcs .c3-chart-arcs-background{fill:#e0e0e0;stroke:#fff}.c3-chart-arcs .c3-chart-arcs-gauge-unit{fill:#000;font-size:16px}.c3-chart-arcs .c3-chart-arcs-gauge-max{fill:#777}.c3-chart-arcs .c3-chart-arcs-gauge-min{fill:#777}.c3-chart-arc .c3-gauge-value{fill:#000}.c3-chart-arc.c3-target g path{opacity:1}.c3-chart-arc.c3-target.c3-focused g path{opacity:1}
+.c3 svg{font:10px sans-serif;-webkit-tap-highlight-color:transparent}.c3 line,.c3 path{fill:none;stroke:#000}.c3 text{-webkit-user-select:none;-moz-user-select:none;user-select:none}.c3-bars path,.c3-event-rect,.c3-legend-item-tile,.c3-xgrid-focus,.c3-ygrid{shape-rendering:crispEdges}.c3-chart-arc path{stroke:#fff}.c3-chart-arc rect{stroke:#fff;stroke-width:1}.c3-chart-arc text{fill:#fff;font-size:13px}.c3-grid line{stroke:#aaa}.c3-grid text{fill:#aaa}.c3-xgrid,.c3-ygrid{stroke-dasharray:3 3}.c3-text.c3-empty{fill:grey;font-size:2em}.c3-line{stroke-width:1px}.c3-circle._expanded_{stroke-width:1px;stroke:#fff}.c3-selected-circle{fill:#fff;stroke-width:2px}.c3-bar{stroke-width:0}.c3-bar._expanded_{fill-opacity:1;fill-opacity:.75}.c3-target.c3-focused{opacity:1}.c3-target.c3-focused path.c3-line,.c3-target.c3-focused path.c3-step{stroke-width:2px}.c3-target.c3-defocused{opacity:.3!important}.c3-region{fill:#4682b4;fill-opacity:.1}.c3-brush .extent{fill-opacity:.1}.c3-legend-item{font-size:12px}.c3-legend-item-hidden{opacity:.15}.c3-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.c3-title{font:14px sans-serif}.c3-tooltip-container{z-index:10}.c3-tooltip{border-collapse:collapse;border-spacing:0;background-color:#fff;empty-cells:show;-webkit-box-shadow:7px 7px 12px -9px #777;-moz-box-shadow:7px 7px 12px -9px #777;box-shadow:7px 7px 12px -9px #777;opacity:.9}.c3-tooltip tr{border:1px solid #ccc}.c3-tooltip th{background-color:#aaa;font-size:14px;padding:2px 5px;text-align:left;color:#fff}.c3-tooltip td{font-size:13px;padding:3px 6px;background-color:#fff;border-left:1px dotted #999}.c3-tooltip td>span{display:inline-block;width:10px;height:10px;margin-right:6px}.c3-tooltip td.value{text-align:right}.c3-area{stroke-width:0;opacity:.2}.c3-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}.c3-chart-arcs .c3-chart-arcs-background{fill:#e0e0e0;stroke:#fff}.c3-chart-arcs .c3-chart-arcs-gauge-unit{fill:#000;font-size:16px}.c3-chart-arcs .c3-chart-arcs-gauge-max{fill:#777}.c3-chart-arcs .c3-chart-arcs-gauge-min{fill:#777}.c3-chart-arc .c3-gauge-value{fill:#000}.c3-chart-arc.c3-target g path{opacity:1}.c3-chart-arc.c3-target.c3-focused g path{opacity:1}.c3-drag-zoom.enabled{pointer-events:all!important;visibility:visible}.c3-drag-zoom.disabled{pointer-events:none!important;visibility:hidden}.c3-drag-zoom .extent{fill-opacity:.1}

docs/index.html.haml

@@ -38,6 +38,10 @@
 
   %h3 Change Log
   %ul
+    %li
+      <a href="https://github.com/c3js/c3/releases/tag/v0.6.7">v0.6.7</a><span class="gray">&nbsp;-&nbsp;2018-08-08</span>
+      %ul
+        %li Add the zoom type 'drag'.
     %li
       <a href="https://github.com/c3js/c3/releases/tag/v0.6.6">v0.6.6</a><span class="gray">&nbsp;-&nbsp;2018-07-24</span>
       %ul

docs/js/c3.js

@@ -1,4 +1,4 @@
-/* @license C3.js v0.6.6 | (c) C3 Team and other contributors | http://c3js.org/ */
+/* @license C3.js v0.6.7 | (c) C3 Team and other contributors | http://c3js.org/ */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
     typeof define === 'function' && define.amd ? define(factory) :
@@ -478,6 +478,7 @@
         eventRectsMultiple: 'c3-event-rects-multiple',
         zoomRect: 'c3-zoom-rect',
         brush: 'c3-brush',
+        dragZoom: 'c3-drag-zoom',
         focused: 'c3-focused',
         defocused: 'c3-defocused',
         region: 'c3-region',
@@ -1008,7 +1009,7 @@
     };
 
     var c3 = {
-        version: "0.6.6",
+        version: "0.6.7",
         chart: {
             fn: Chart.prototype,
             internal: {
@@ -1240,6 +1241,9 @@
         if ($$.initPie) {
             $$.initPie();
         }
+        if ($$.initDragZoom) {
+            $$.initDragZoom();
+        }
         if ($$.initSubchart) {
             $$.initSubchart();
         }
@@ -5465,6 +5469,8 @@
             resize_auto: true,
             zoom_enabled: false,
             zoom_initialRange: undefined,
+            zoom_type: 'scroll',
+            zoom_disableDefaultBehavior: false,
             zoom_privileged: false,
             zoom_rescale: false,
             zoom_onzoom: function zoom_onzoom() {},
@@ -9429,6 +9435,10 @@
             startEvent;
 
         $$.zoom = d3.zoom().on("start", function () {
+            if (config.zoom_type !== 'scroll') {
+                return;
+            }
+
             var e = d3.event.sourceEvent;
             if (e && e.type === "brush") {
                 return;
@@ -9436,12 +9446,23 @@
             startEvent = e;
             config.zoom_onzoomstart.call($$.api, e);
         }).on("zoom", function () {
+            if (config.zoom_type !== 'scroll') {
+                return;
+            }
+
             var e = d3.event.sourceEvent;
             if (e && e.type === "brush") {
                 return;
             }
-            $$.redrawForZoom.call($$);
+
+            $$.redrawForZoom();
+
+            config.zoom_onzoom.call($$.api, $$.x.orgDomain());
         }).on('end', function () {
+            if (config.zoom_type !== 'scroll') {
+                return;
+            }
+
             var e = d3.event.sourceEvent;
             if (e && e.type === "brush") {
                 return;
@@ -9475,6 +9496,51 @@
         return $$.d3.zoomIdentity.scale($$.width / (s[1] - s[0])).translate(-s[0], 0);
     };
 
+    ChartInternal.prototype.initDragZoom = function () {
+        var $$ = this;
+        var d3 = $$.d3;
+        var config = $$.config;
+        var context = $$.context = $$.svg;
+        var brushXPos = $$.margin.left + 20.5;
+        var brushYPos = $$.margin.top + 0.5;
+
+        if (!(config.zoom_type === 'drag' && config.zoom_enabled)) {
+            return;
+        }
+
+        var getZoomedDomain = function getZoomedDomain(selection) {
+            return selection && selection.map(function (x) {
+                return $$.x.invert(x);
+            });
+        };
+
+        var brush = $$.dragZoomBrush = d3.brushX().on("start", function () {
+            $$.api.unzoom();
+
+            $$.svg.select("." + CLASS.dragZoom).classed("disabled", false);
+
+            config.zoom_onzoomstart.call($$.api, d3.event.sourceEvent);
+        }).on("brush", function () {
+            config.zoom_onzoom.call($$.api, getZoomedDomain(d3.event.selection));
+        }).on("end", function () {
+            if (d3.event.selection == null) {
+                return;
+            }
+
+            var zoomedDomain = getZoomedDomain(d3.event.selection);
+
+            if (!config.zoom_disableDefaultBehavior) {
+                $$.api.zoom(zoomedDomain);
+            }
+
+            $$.svg.select("." + CLASS.dragZoom).classed("disabled", true);
+
+            config.zoom_onzoomend.call($$.api, zoomedDomain);
+        });
+
+        context.append("g").classed(CLASS.dragZoom, true).attr("clip-path", $$.clipPath).attr("transform", "translate(" + brushXPos + "," + brushYPos + ")").call(brush);
+    };
+
     ChartInternal.prototype.getZoomDomain = function () {
         var $$ = this,
             config = $$.config,
@@ -9498,9 +9564,14 @@
 
         zoom.update();
 
+        if (config.zoom_disableDefaultBehavior) {
+            return;
+        }
+
         if ($$.isCategorized() && x.orgDomain()[0] === $$.orgXDomain[0]) {
             x.domain([$$.orgXDomain[0] - 1e-10, x.orgDomain()[1]]);
         }
+
         $$.redraw({
             withTransition: false,
             withY: config.zoom_rescale,
@@ -9508,10 +9579,10 @@
             withEventRect: false,
             withDimension: false
         });
+
         if (d3.event.sourceEvent && d3.event.sourceEvent.type === 'mousemove') {
             $$.cancelClick = true;
         }
-        config.zoom_onzoom.call($$.api, x.orgDomain());
     };
 
     return c3;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "c3",
-  "version": "0.6.6",
+  "version": "0.6.7",
   "description": "D3-based reusable chart library",
   "main": "c3.js",
   "files": [

src/core.js

@@ -20,7 +20,7 @@ import {
 } from './util';
 
 var c3 = {
-    version: "0.6.6",
+    version: "0.6.7",
     chart: {
         fn: Chart.prototype,
         internal: {