时间戳

首页 > 解决方案 > 如何限制d3中的可拖动区域？

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

问题描述

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

https://jsfiddle.net/asicfr/34TKg/

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

标签： d3.jsdraggabledrag

解决方案

漂亮干净的 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 ] + ")"
        })
    });

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

希望这可以帮助！

推荐阅读