Javascript 如何覆盖C3.js中的拖动事件

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

由于使用

C3.jsapi

似乎不可能，我尝试通过在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

和

dragend

事件？

C3事件矩形标记驱动事件的层（工具提示、单击等）。除非希望事件反应被偏移，否则通常不希望移动此按钮（例如，当您将鼠标悬停在bar 1之外的其他位置时，会得到bar 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);

---

小提琴-

---

下面是它的外观-红色点是我将鼠标放在上面的位置，以便为第一组条显示工具提示

---

谢谢分享您的经验，但这里是发布问题的地方。请问你的具体问题是什么？哦，很抱歉，我忘记了我文章的这一部分，因为我太专注于解释我的问题了。这是我的帖子的编辑版本，我在这里添加了我的问题。我想知道如何在C3.js图形中成功触发拖动事件，特别是dragstart和dragend事件？你在谷歌搜索过吗？是的。我刚刚对我的代码进行了更改，现在可以使用了。var drag=d3.behavior.drag（）.on（“drag”，function（）{}）d3.selectAll（'.c3 event rects'）。调用（drag）现在我需要恢复与开始点和结束点对应的x，这似乎很棘手。非常感谢，很酷blue@Seddiki阿纳斯-你把这件事彻底解决了吗？干杯