Search code examples
javascriptzoomingscaled3.js

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.

Solution

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