Question

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

由于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事件？

非常感谢您的回答

Answer 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/

以下是它的外观 - 红点是我用鼠标移动来为第一组条形图显示工具提示

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

1 个答案: