如何将拖动用作 'function' 而不是 'var'？

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

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

我应该换一种方式吗？基本上我想做的就是对所有对象使用一个拖动函数，但是在我调用拖动函数时通过 'boundaries'。

Answer 1

就目前而言，您的 buttons.call() 函数永远不会收到拖动行为的处理程序。之前你给了它 d3.behavior.drag() 调用的 return 值，但你稍后的函数没有 return 那个引用。

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

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

如何将拖动用作 'function' 而不是 'var'？

How to use drag as a 'function' instead of a 'var'?

javascript

d3.js