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

【问题标题】：How to override the dragging events in C3.js如何覆盖 C3.js 中的拖动事件
【发布时间】：2015-07-22 08:56:41
【问题描述】：

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

由于 C3.js API 似乎无法实现，我尝试按照 D3.js Drag Behaviour 上的这个小演练来实现拖动事件。但是，我没有很好地理解它，因为当我在图表上尝试它时它不起作用。

这是我的代码示例：

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.js 图表中成功触发拖动事件，尤其是 dragstart 和 dragend 事件？
你在谷歌上搜索过d3 drag behaviour example吗？
是的。我刚刚对我的代码进行了更改，它现在可以工作了。 var drag = d3.behavior.drag() .on("drag", function () { }) d3.selectAll('.c3-event-rects').call(drag) 现在我需要恢复对应的x开头和结尾的点似乎很棘手。非常感谢酷蓝
@Seddiki Anass - 你把这件事彻底解决了吗？干杯！

标签： javascript d3.js event-handling dom-events c3.js

【解决方案1】：

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/

这是它的外观 - 红点是我将鼠标悬停在第一组条形图上显示工具提示的位置

【讨论】：