title: How to override the dragging events in C3.js
body: <p>I am currently trying to implement a zooming feature that is slightly different from the one that already exists.<br>
  Actually, I would like that if a user clicks and drags on the graph it zooms on the so defined domain. I would like to do it that way because with the mouse wheel it prevents the user from  the page up/down.</p>
  
  <p>As it doesn't seem to be possible with the <code>C3.js API</code>, I tried to implement the drag event  by following this little walkthrough on D3.js <a href="https://github.com/mbostock/d3/wiki/Drag-Behavior" rel="nofollow noreferrer">Drag Behaviour</a>.
  However, I didn't understand it well as it is not working when I try it on the graph.</p>
  
  <p>Here's a sample of my code :</p>
  
  <pre><code>function setHandlers() {
      /**
       * A custom drag event  to zoom on the graph
       */
  
      var drag = d3.behavior.drag();
      d3.selectAll('.c3-event-rects').on(".drag", null);
  
      drag
          .on('dragstart', function (d) {
              d3.event.sourceEvent.stopPropagation();
              console.log("start");
              console.log(d)
          })
          .on('drag', function (d) {
              console.log("on bouge :)")           
          })
          .on('dragend', function (d) {
              console.log("end");
              console.log(d)
           })
  }
  </code></pre>
  
  <p>I call this function whenever I refresh my graph and I have already coded a custom handler for a double click (in the same function but I have  it off to be more clear). I would like to know how to successfully trigger a drag event in a C3.js graph, especially the <code>dragstart</code> and <code>dragend</code> events?</p>