d3.js限制平移强制布局 [英] d3.js limit panning in force layout

问题描述

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

上面的小提琴包含一个我正在做的简单版本。
因为我可能必须可视化一个非常大的数据集，我使用一个函数在强制完成后缩小组持有元素（'g'）。

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

组持有元素应该不能去：

1. 从svg的顶部向下超过20像素。


2. 距离左侧超过20像素


3. 距离svg底部超过20像素。
svg。

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

  function zoomed（）{
 if（d3.event.sourceEvent == null）{// fitFullGraph使用缩放
 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'）{//事件是zoom 
 g.attr（transform，translate（+ d3.event。 translate +）scale（+ d3.event.scale +））; 
 
} 
 else {//事件是pan 
 // if（t [0]  // else if（t [0]> svg_width-g_width-margin）t [0] = svg_width-g_width- 
 // 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 +））; 
} 
 
} 
 
} 
  

<

有没有人有解决方案？

我试图实现的限制是注释掉的，因为它们不能正常工作。

我用于阻止向左侧移动

> translate X scale

  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）; 
 //不要向左平移更多
 if（tX> 0）{
 g.attr（transform，translate（+ d3.event.translate + + d3.event.scale +））; 
} else {
 translate [0] = 0; 
 g.attr（transform，translate（+ translate +）scale（+ d3.event.scale +））; 
} 
  

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

I am using d3.js with a force layout to visualize a large number of nodes. I would like to implement a limitation to the panning option of the zoom. JSFiddle : https://jsfiddle.net/40z5tw8h/24/

The above fiddle contains a simple version of what I am working on. Because I would potentially have to visualize a very large dataset, I use a function to scale down the group holding element ('g') after forces are done. In that way i always have the full visualization visible afterwards.

I would like to limit the panning - when the graph is fully visible, to only be able to move it within the viewport. In case the layout is zoomed, I would like to limit the panning as follows:

The group holding element should not be able to go:

1. down more than 20 px from the top of the svg.
2. right more than 20 px from the left side of the svg.
3. up more than 20 px from the bottom of the svg.
4. left more than 20 px from the right side of the svg.

I think all the implementation should be within the zoom function, which for now is:

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

        }

    }

The limitations I tried to implement are commented out, because they do not work properly.

Does anyone have a solution?

解决方案

This is not the complete answer to your question.

I used for block panning to left side translate X scale

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

Which cancels the translation to left but internally it continues. Your user probably stops dragging to the left. Panning to the right gets weird when starting to pan as internally the event has panned far to the left.

这篇关于d3.js限制平移强制布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！