D3.js 如何限制d3中的可拖动区域？

我在d3中有一个可拖动的元素，但我想将可拖动区域限制在svg的边界上，这样它就不会消失在视野之外。这可能吗？下面是一个JSFIDLE，对元素的拖动位置没有限制：

---

漂亮干净的JSFIDLE-帮助您变得容易

如果知道要拖动的容器和元素的尺寸，则可以手动执行此操作

实际上，您可以检查被拖动对象的潜在新位置是否超出容器的边界。如果是这样，则将元素的位置设置为使其在容器内完全可见的值

我制作了一个JSFIDLE来展示它：

大多数“我的更新”都是在对

drag

事件的回调函数中进行的：

    .on("drag", function(d,i) {
        var left = d3.event.x
        if (left + groupWidth + strokeWidth > svgWidth) {
            left = svgWidth - groupWidth - strokeWidth
        } else if (d3.event.x < 0) {
            left = 0
        }
        var top = d3.event.y
        if (top + groupHeight + strokeWidth > svgHeight) {
          top = svgHeight - groupHeight - strokeWidth
        } else if (d3.event.y < 0) {
          top = 0
        }
        d3.select(this).attr("transform", function(d,i){
            return "translate(" + [ left,top ] + ")"
        })
    });

.on（“拖动”，函数（d，i）{
var left=d3.event.x
如果（左+组宽度+冲程宽度>svgWidth）{
左=svgWidth-groupWidth-strokeWidth
}else if（d3.event.x<0）{
左=0
}
var top=d3.event.y
如果（顶部+组高+冲程宽度>svgHeight）{
顶部=svgHeight-组高度-冲程宽度
}else if（d3.event.y<0）{
top=0
}
d3.选择（this）.attr（“转换”），函数（d，i）{
返回“translate（“+[左，上]+”）
})
});

我所做的唯一其他更改是将相关维度值保存到变量中，这样它们就不会被多次写出

希望这有帮助

    .on("drag", function(d,i) {
        var left = d3.event.x
        if (left + groupWidth + strokeWidth > svgWidth) {
            left = svgWidth - groupWidth - strokeWidth
        } else if (d3.event.x < 0) {
            left = 0
        }
        var top = d3.event.y
        if (top + groupHeight + strokeWidth > svgHeight) {
          top = svgHeight - groupHeight - strokeWidth
        } else if (d3.event.y < 0) {
          top = 0
        }
        d3.select(this).attr("transform", function(d,i){
            return "translate(" + [ left,top ] + ")"
        })
    });