d3.js 限制强制布局中的平移答案

【问题标题】：d3.js limit panning in force layoutd3.js 限制强制布局中的平移
【发布时间】：2017-03-02 13:55:45
【问题描述】：

我正在使用带有强制布局的 d3.js 来可视化大量节点。我想对缩放的平移选项实施限制。 JSFiddle：https://jsfiddle.net/40z5tw8h/24/

上面的小提琴包含我正在研究的一个简单版本。因为我可能需要可视化一个非常大的数据集，所以我使用一个函数在力完成后缩小组保持元素 ('g')。这样一来，我之后总是可以看到完整的可视化。

我想限制平移 - 当图形完全可见时，只能在视口内移动它。如果布局被缩放，我想限制平移如下：

组持元素应该不能走：

从 svg 顶部向下超过 20 像素。
距离 svg 左侧超过 20 像素。
从 svg 底部向上超过 20 像素。
距 svg 右侧超过 20 像素。

我认为所有的实现都应该在缩放功能中，现在是：

function zoomed(){
        if (d3.event.sourceEvent == null){ //when fitFullGraph uses the zoom
            g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
        }
        else{
            var gElementBounds = g.node().getBoundingClientRect();
            var g_bottom = gElementBounds.bottom;
            var g_top = gElementBounds.top;
            var g_left = gElementBounds.left;
            var g_right = gElementBounds.right;
            var g_height = gElementBounds.height;
            var g_width = gElementBounds.width;

            var svg = g.node().parentElement;
            var svgElementBounds = svg.getBoundingClientRect();
            var svg_bottom = svgElementBounds.bottom;
            var svg_top = svgElementBounds.top;
            var svg_left = svgElementBounds.left;
            var svg_right = svgElementBounds.right;
            var svg_height = svgElementBounds.height;
            var svg_width = svgElementBounds.width;

            var t = d3.event.translate;
            var margin = 20;

            if(d3.event.sourceEvent.type == 'wheel'){//event is zoom
                g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");

            }
            else{//event is pan
                // if(t[0] < svg_left + margin) t[0]= svg_left + margin;
                //else if(t[0] > svg_width-g_width - margin) t[0] = svg_width-g_width - margin;
                // if(t[1] < g_height +margin) t[1] = g_height + margin;
                //else if (t[1] > svg_height - margin) t[1] = svg_height - margin;
               //.attr("transform", "translate(" + t+ ")scale(" + d3.event.scale + ")");
               //3.event.translate = t;
                g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
            }

        }

    }

我尝试实施的限制已被注释掉，因为它们无法正常工作。

有人有解决办法吗？

【问题讨论】：

标签： javascript d3.js transform translate pan

【解决方案1】：

这不是您问题的完整答案。

我用于块平移到左侧平移 X 比例

var translate = d3.event.translate;
var translateX = translate[0];
var translateY = translate[1];
var scale = d3.event.scale;
var tX = translateX * scale;
var tY = translateY * scale;
console.log('tx', tX, 'ty', tY);
// Do not pan more to left
if (tX> 0) {
  g.attr("transform", "translate(" + d3.event.translate + ")  scale(" + d3.event.scale + ")");
} else {
  translate[0] = 0;
  g.attr("transform", "translate(" + translate + ")  scale(" + d3.event.scale + ")");
}

这会取消向左的翻译，但在内部它会继续。您的用户可能会停止向左拖动。开始平移时向右平移会变得很奇怪，因为事件在内部已经平移到很远的左侧。

【讨论】：