Question

首先我使用它在屏幕上拖动对象：

var button_drag = d3.behavior.drag()
             d3.behavior.drag()
             .origin(function() {
                var g = this;
                return {x: d3.transform(g.getAttribute("transform")).translate[0],
                        y: d3.transform(g.getAttribute("transform")).translate[1]};
            })
            .on("drag", function(d) {

                g = this;
                translate = d3.transform(g.getAttribute("transform")).translate;

                x = d3.event.dx + translate[0],
                y = d3.event.dy + translate[1];

                //boundaries

                // if(x<10){x=10}
                // if(x>100){x=100}
                if(y<10){y=10}
                if(y>200){y=200}

                d3.select(g).attr("transform", "translate(" + x + "," + y + ")");
                d3.event.sourceEvent.stopPropagation();             
            });

这样称呼：

buttons.call(buttons_drag);

现在我想将其更改为一个函数，以便我可以通过它传递变量来为不同的对象设置不同的边界：

function button_drag(xLower,xhigher,yLower,yHigher){
    d3.behavior.drag()
             .origin(function() {
                var g = this;
                return {x: d3.transform(g.getAttribute("transform")).translate[0],
                        y: d3.transform(g.getAttribute("transform")).translate[1]};
            })
            .on("drag", function(d) {

                g = this;
                translate = d3.transform(g.getAttribute("transform")).translate;

                x = d3.event.dx + translate[0],
                y = d3.event.dy + translate[1];

                //boundaries

                if(x<xLower){x=xLower}
                if(x>xHigher){x=xHigher}
                if(y<yLower){y=-yLower}
                if(y>yHigher){y=yHigher}

                d3.select(g).attr("transform", "translate(" + x + "," + y + ")");
                d3.event.sourceEvent.stopPropagation();             
            });
}

然后这样称呼它：

buttons.call(buttons_drag(xLower,xHigher,yLower,yHigher));

一旦我将其更改为一个功能，整个拖动功能似乎根本不起作用，我不太清楚为什么。

我应该以不同的方式做这件事吗？基本上我想做的就是对所有对象使用一个拖动函数，但在调用拖动函数时通过“边界”。

Answer 1

目前看来，buttons.call()函数从未收到拖动行为的处理程序。以前你给它的d3.behavior.drag()调用的返回值，但稍后你的函数不会返回该引用。

所以只需添加一个return就可以了：

function button_drag(xLower,xhigher,yLower,yHigher){
  return d3.behavior.drag()
  // ...
}

如何使用drag作为'函数'而不是'var'？

1 个答案: