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 t

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