How to override the dragging events in C3.js

Question

I am currently trying to implement a zooming feature that is slightly different from the one that already exists.
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.

As it doesn't seem to be possible with the C3.js API, I tried to implement the drag event by following this little walkthrough on D3.js Drag Behaviour. However, I didn't understand it well as it is not working when I try it on the graph.

Here's a sample of my 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)
         })
}

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 sucessfully trigger a drag event in a C3.js graph, especially the dragstart and dragend events?

Thanks a lot for your answers

Answer 1

c3-event-rects marks the layer that drives the events (tooltips, clicks, etc.). You don't usually want to move this unless you want the event reactions to be offset (like you get the bar 1 tooltips when you hover over someplace else than over bar 1)

Also, the layer has it's opacity set to 0, so you can't actually see it move unless you override it's opacity. Something like

.c3-event-rects {
   fill: red;
   fill-opacity: 0.2 !important;
}

That said, here is how you do this

var drag = d3.behavior.drag()
            .origin(function () {
                var t = d3.select(this);
                var translate = d3.transform(t.attr('transform')).translate;
                return { x: translate[0], y: translate[1]};
            })
            .on("drag", function () {
                d3.select(this)
                    .attr("transform", "translate(" + d3.event.x + " " + d3.event.y + ")")
            })
d3.selectAll('.c3-event-rects').call(drag);

---

Fiddle - http://jsfiddle.net/d5bhwwLh/

---

Here's how it looks - the red spot is where I had my mouse over to make the tooltip appear for the first set of bars