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

Question

我在 d3 中有一个可拖动元素，但我想将可拖动区域限制在 svg 的边界内，这样它就永远不会超出视野。这可能吗？这是一个 jsfiddle，对可以拖动元素的位置没有限制：

var drag1 = d3.behavior.drag()
        .origin(function() { 
            var t = d3.select(this);
            return {x: t.attr("x") + d3.transform(t.attr("transform")).translate[0],
                    y: t.attr("y") + d3.transform(t.attr("transform")).translate[1]};
        })
        .on("drag", function(d,i) {
            d3.select(this).attr("transform", function(d,i){
                return "translate(" + [ d3.event.x,d3.event.y ] + ")"
            })
        });

group.call(drag1);

Answer 1

干净整洁的 JSFiddle - 很容易为您提供帮助！

您可以手动执行此操作，前提是您知道容器的尺寸和要拖动的元素。

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

我制作了一个 JSFiddle 来展示它：https://jsfiddle.net/0sga1ypc/

我的大部分更新都是在 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 ] + ")"
        })
    });

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

希望对您有所帮助！

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

How to limit draggable area in d3?

draggable

drag

d3.js