Question

我希望使用D3中的拖动功能在屏幕上拖动一些圆圈。但我不想发生的是让用户将圆圈拖到窗外。

所以我需要的是一个边界＆＃39;所以圈子不能被拖出屏幕。

这是我的拖动功能。

function drag(xLower,xHigher,yLower,yHigher){
    clog("drag");
    return 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];

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

这需要4个参数给我一个相对于当前位置的边界但我不确定如何将这样的东西应用到所有圈子中：

if(x < 0) {x = 0}
if(x > screenWidth) {x = screenWidth}

和'y'相同。

我想在全局范围内找到X值，即X值实际上是什么，所以我可以应用上面的if语句。

如何找到元素的当前X和Y值？ HTML，JS，D3

0 个答案: