2

I have a test site where I am building a d3-based force-directed network graph from my own data.

If I pick about five or six genes, the nodes in my graph start to get drawn outside the canvas.

What parts of the d3 API do I need to call to control zoom level, so that nodes do not disappear off the edge of the canvas?

If available, I would definitely appreciate any code snippets that briefly explain the concept, unless the implementation is fairly simple. Thanks for your advice.

ZachB
  • 13,051
  • 4
  • 61
  • 89
Alex Reynolds
  • 95,983
  • 54
  • 240
  • 345
  • possible duplicate of [Is there a way to zoom into a graph layout done using D3?](http://stackoverflow.com/questions/7871425/is-there-a-way-to-zoom-into-a-graph-layout-done-using-d3) – Alex Reynolds Apr 04 '12 at 22:12

2 Answers2

9

D3 allows to use zoom and it's fairly easy to implement. You'll only need to wrap your graph inside a "g" element that I'll call "viewport". Then you'll assign to the zoom event of the svg element:

svg.call(d3.behavior.zoom().on("zoom", redraw))

the following function:

function redraw() {
    d3.select("#viewport").attr("transform",
        "translate(" + d3.event.translate + ")"
        + " scale(" + d3.event.scale + ")");
}
txominpelu
  • 1,067
  • 1
  • 6
  • 11
1
var x, y, k;
            if (d && centered !== d) {
                var centroid = path.centroid(d);
                x = centroid[0];
                y = centroid[1];
                k = 4;
                centered = d;
            } else {
                x = w / 2;
                y = h / 2;
                k = 1;
                centered = null;
            }

write the following code in zoom function svg.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")");

for absolute scale you cann use this code this will be helpfull for maps zooming and panning

Dev
  • 120
  • 6