如何重写C3.js中的拖动事件

我目前正在尝试实现一种与现有功能略有不同的缩放功能。
实际上，我希望如果用户单击并拖动图表，它会放大如此定义的域。我想这样做，因为使用鼠标滚轮可以防止用户向上/向下翻页。

因为这似乎不可能C3.js API，我尝试按照 D3.js 上的这个小演练来实现拖动事件拖动行为。 但是，我不太理解它，因为当我在图表上尝试它时它不起作用。

这是我的代码示例：

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)
         })
}

每当我刷新图表时，我都会调用此函数，并且我已经为双击编写了一个自定义处理程序（在同一函数中，但我将其关闭以便更清楚）。我想知道如何在 C3.js 图中成功触发拖动事件，尤其是dragstart and dragend events?

c3-event-rects 标记驱动事件（工具提示、单击等）的层。您通常不想移动它，除非您希望事件反应被抵消（就像当您将鼠标悬停在第 1 条以外的其他位置时获得第 1 条工具提示）

此外，该图层的不透明度设置为 0，因此您实际上看不到它移动，除非您覆盖它的不透明度。就像是

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

也就是说，这就是你如何做到这一点

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);

小提琴 -http://jsfiddle.net/d5bhwwLh/

它看起来是这样的 - 红点是我将鼠标悬停在第一组栏上显示工具提示的位置