d3.js限制平移力布局

Question

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

上面的小提琴包含了我正在处理的简单版本。 因为我可能需要可视化非常大的数据集，所以在强制完成后我使用一个函数来缩小组保持元素（'g'）。 通过这种方式，我总是可以看到完整的可视化效果。

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

组持有元素不应该去：

1. 从svg顶部下降超过20 px。
2. 从svg左侧超过20 px。
3. 距离svg底部超过20 px。
4. 从svg的右侧离开超过20像素。

我认为所有的实现都应该在zoom函数中，现在它是：

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 + ")");
            }

        }

    }

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

有没有人有办法解决吗？

Answer 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 + ")");
}

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