Optional transition on zoom

Added optional arguments to zoomToDomain to allow for transition.

README.md

@@ -87,7 +87,7 @@ In addition to this configuration object, it also exposes some public members al
 *   **scale()** provides the horizontal scale, allowing you to retrieve bounding dates thanks to `.scale().domain()`,
 *   **filteredData()** returns an object with both `data` and `fullData` keys containing respectively bounds filtered data and full dataset.
 *   **draw(config, scale)** redraws chart using given configuration and `d3.scaleTime` scale
-*   **zoomToDomain(domain)** programmatically zooms to domain, where domain is `[date, date]` (leftmost date, rightmost date). Ignores restrictPan modifier (default D3 behaviour).
+*   **zoomToDomain(domain, duration = 0, delay = 0, ease = d3.easeLinear)** programmatically zooms to domain, where domain is `[date, date]` (leftmost date, rightmost date). Ignores restrictPan modifier (default D3 behaviour). By default there is no transition as duration is 0, however this can be tweaked to allow for a more visual appealing zoom.
 *   **destroy()** execute this function before to removing the chart from DOM. It prevents some memory leaks due to event listeners.
 *   **currentBreakpointLabel** returns current breakpoint (for instance `small`) among a [list of breakpoints](./docs/configuration.md#breakpoints).
 

src/index.js

@@ -86,7 +86,7 @@ export default ({
                 )
             );
 
-            chart._zoomToDomain = domain => {
+            chart._zoomToDomain = (domain, duration, delay, ease) => {
                 const zoomIdentity = getDomainTransform(
                     d3,
                     config,
@@ -95,7 +95,12 @@ export default ({
                     xScale,
                     width
                 );
-                svg.call(zoomObject.transform, zoomIdentity);
+                svg
+                    .transition()
+                    .ease(ease)
+                    .delay(delay)
+                    .duration(duration)
+                    .call(zoomObject.transform, zoomIdentity);
             };
         }
 
@@ -126,9 +131,14 @@ export default ({
 
     chart.scale = () => chart._scale;
     chart.filteredData = () => chart._filteredData;
-    chart.zoomToDomain = domain => {
+    chart.zoomToDomain = (
+        domain,
+        duration = 0,
+        delay = 0,
+        ease = d3.easeLinear
+    ) => {
         if (chart._zoomToDomain) {
-            chart._zoomToDomain(domain);
+            chart._zoomToDomain(domain, duration, delay, ease);
         }
     };
     chart.destroy = (callback = () => {}) => {