0

I have implemented panning zooming and dragging in d3 force layout code. They are working fine. However,I noticed one issue with panning/zooming whenever I pan or zoom, the nodes do not expand to complete viewport.

You may get more clarity with the screenshots attached.

Priya Ahuja
  • 37
  • 8
  • http://jsfiddle.net/pria_3/70qy8ps6/19/ Refer to this code.Try to drag analytics to the corner of the viewport.It gets restricted somewhat before – Priya Ahuja Oct 13 '15 at 07:28

1 Answers1

1

There is no need to change the cx and cy attributes of circle since it is already within the node group. Just need to transform the node group elements. Also note that position of links should be updated after nodes since position of links is calculated from node positions.

Try replacing your tick function as shown below.

function tick(d) {
    node.attr("transform", function(d) {
        var radius = d.children ? 22 : isNaN(parseInt(d.name)) ? 16 : 10;
        d.x = Math.max(radius, Math.min(w - radius, d.x));
        d.y = Math.max(radius, Math.min(sh - radius, d.y));
        return "translate(" + d.x + "," + d.y + ")";
    });

    link.attr("x1", function(d) {
            return d.source.x;
        })
        .attr("y1", function(d) {
            return d.source.y;
        })
        .attr("x2", function(d) {
            return d.target.x;
        })
        .attr("y2", function(d) {
            return d.target.y;
        });
}

Here is the working JSFiddle

Gilsha
  • 14,431
  • 3
  • 32
  • 47
  • Thanks Glisha that helps but it hides my layout when i drag it outside the viewport..I tried using http://bl.ocks.org/mbostock/1129492 but that gives me trouble with panning and zooming.When i pan/zoom my viewport tends to shift(due to which the main problem i mentioned occurs)..Any idea to restrict the layout with in the viewport (restricting the panning/zooming to the viewport also) – Priya Ahuja Oct 13 '15 at 09:41
  • Hi Priya, I have updated the answer and fiddle. Try now. Hope it helps. – Gilsha Oct 13 '15 at 09:52
  • it restricts the node to go out thanks,,:) but the main problem happens when you pan the background and then try to drag it gets expanded to limited point not to the corner.You can replicate the issue in the fiddle you attached. – Priya Ahuja Oct 13 '15 at 10:38