如何覆盖C3.js中的拖动事件 [英] How to override the dragging events in C3.js

问题描述

我目前正在尝试实现与已经存在的缩放功能略有不同的缩放功能。

实际上，如果用户在图形上点击并拖动它，则会放大定义域。我想这样做，因为使用鼠标滚轮阻止用户上/下。

由于似乎不可能 C3.js API ，我尝试通过在D3.js

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 the graph it zooms on the so defined domain. I would like to do it that way because with the mouse wheel it prevents the user from the page up/down.

As it doesn't seem to be possible with the C3.js API, I tried to implement the drag event by following this little walkthrough on D3.js Drag Behaviour. However, I didn't understand it well as it is not working when I try it on the graph.

Here's a sample of my code :

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

I call this function whenever I refresh my graph and I have already coded a custom handler for a double click (in the same function but I have it off to be more clear). I would like to know how to sucessfully trigger a drag event in a C3.js graph, especially the dragstart and dragend events?

Thanks a lot for your answers

解决方案

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

这篇关于如何覆盖C3.js中的拖动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！