Add ondragstart & ondragend callbacks

CONTRIBUTING.md

@@ -65,7 +65,8 @@ Then access `http://0.0.0.0:4567`.
 
 ## Contributing your changes
 
-Add something about PRs here, indicate that PRs should not bump the version number & the build output files (`c3.js`, `c3.min.js`, `c3.css` & `c3.min.css`) should be excluded
+Pull requests are welcome, though please post an issue first to see whether such a change is desirable.
+If you choose to submit a pull request, please do not bump the version number unless asked to, and please include test cases for any new features. Squash all your commits as well, please.
 
 [bundler]: https://bundler.io
 [rbenv]: https://github.com/rbenv/rbenv

src/config.js

@@ -59,6 +59,8 @@ c3_chart_internal_fn.getDefaultConfig = function () {
         data_onmouseout: function () {},
         data_onselected: function () {},
         data_onunselected: function () {},
+        data_ondragstart: function() {},
+        data_ondragend: function() {},
         data_url: undefined,
         data_headers: undefined,
         data_json: undefined,

src/data.js

@@ -290,6 +290,36 @@ c3_chart_internal_fn.findClosest = function (values, pos) {
 
     return closest;
 };
+
+c3_chart_internal_fn.findClosestToPosFromTargets = function(targets, pos) {
+    var $$ = this, candidates;
+
+    // map to array of closest points of each target
+    candidates = targets.map(function (target) {
+        return $$.findClosestToPos(target.values, pos);
+    });
+
+    // decide closest point and return
+    return $$.findClosestToPos(candidates, pos);
+};
+c3_chart_internal_fn.findClosestToPos = function(values, pos) {
+    var $$ = this,
+        closest = values[0],
+        closestDist = $$.dist(closest, pos);
+
+    values.forEach(function(v) {
+        var d = $$.dist(v, pos);
+        if (d < closestDist) {
+            closest = v;
+            closestDist = d;
+        }
+    });
+
+    $$.addName(closest);
+
+    return closest;
+};
+
 c3_chart_internal_fn.dist = function (data, pos) {
     var $$ = this, config = $$.config,
         xIndex = config.axis_rotated ? 1 : 0,

src/drag.js

@@ -67,10 +67,17 @@ c3_chart_internal_fn.dragstart = function (mouse) {
     $$.main.select('.' + CLASS.chart).append('rect')
         .attr('class', CLASS.dragarea)
         .style('opacity', 0.1);
+    if (typeof config.data_ondragstart === 'function') {
+        var closestDatum = $$.findClosestToPosFromTargets(
+            $$.filterTargetsToShow($$.data.targets),
+            mouse
+        );
+        config.data_ondragstart(closestDatum);
+    }
     $$.dragging = true;
 };
 
-c3_chart_internal_fn.dragend = function () {
+c3_chart_internal_fn.dragend = function (mouse) {
     var $$ = this, config = $$.config;
     if ($$.hasArcType()) { return; }
     if (! config.data_selection_enabled) { return; } // do nothing if not selectable
@@ -80,5 +87,12 @@ c3_chart_internal_fn.dragend = function () {
         .remove();
     $$.main.selectAll('.' + CLASS.shape)
         .classed(CLASS.INCLUDED, false);
+    if (typeof config.data_ondragend === 'function') {
+        var closestDatum = $$.findClosestToPosFromTargets(
+            $$.filterTargetsToShow($$.data.targets),
+            mouse
+        );
+        config.data_ondragend(closestDatum);
+    }
     $$.dragging = false;
 };

src/interaction.js

@@ -136,7 +136,7 @@ c3_chart_internal_fn.redrawEventRect = function () {
                 d3.drag()
                     .on('drag', function () { $$.drag(d3.mouse(this)); })
                     .on('start', function () { $$.dragstart(d3.mouse(this)); })
-                    .on('end', function () { $$.dragend(); })
+                    .on('end', function () { $$.dragend(d3.mouse(this)); })
             ) : function () {}
         );
 };