CODEWITHSUNDEEP
javascriptzoomingscaled3.js
Alex Reynolds
Alex Reynolds

Reputation: 96994

Changing zoom level of d3 SVG canvas?

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.

Upvotes: 2

Views: 5187

Answers (2)

Dev
Dev

Reputation: 140

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

Upvotes: 1

txominpelu
txominpelu

Reputation: 1067

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

Upvotes: 9

Related Questions