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.

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.

• javascript
• zooming
• scale
• d3.js

• possible duplicate of Is there a way to zoom into a graph layout done using D3? – Alex Reynolds Commented Apr 4, 2012 at 22:12

2 Answers 2

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

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