how to implement zoom in d3 graph of force directed layout and position the nodes

Question

When I was trying out d3 force directed layout, I came across a challenge where I want to zoom this svg. But Its quite tough for me to integrate.I want to remove the scrollers and put zoom for the graph.

http://nylen.tv/d3-process-map/graph.php

I want something like this which i can zoom,

http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html

Below is the code where i integrate the graph in svg,

graph.svg = d3.select('#graph').append('svg')
    .attr('width' , graph.width  + graph.margin.left + graph.margin.right+500)
    .attr('height', graph.height + graph.margin.top  + graph.margin.bottom)
    .append('g')
    .attr('transform', 'translate(' + graph.margin.left + ',' + graph.margin.top + ')');

The Second link has something like this which implements zoom,

var svg = d3.select("svg"),
    inner = svg.select("g");

// Set up zoom support
var zoom = d3.behavior.zoom().on("zoom", function() {
  );
    inner.attr("transform", "translate(" + d3.event.translate + ")" +
                                  "scale(" + d3.event.scale + ")");
    });
svg.call(zoom

Answer 1

Below is the code I inspected from the link you provided(http://nylen.tv/d3-process-map/graph.php) from a file called script.js, it is not minified :)

obj.positionConstraints.push({
                        weight : c.weight,
                        x      : c.x * graph.width,
                        y      : c.y * graph.height
                    });

They are manually calculating the x & y positions as shown above. Their tick function has the following code:

for (var name in graph.data) {
        var obj = graph.data[name];

        obj.positionConstraints.forEach(function(c) {
            var w = c.weight * e.alpha;
            if (!isNaN(c.x)) {
                obj.x = (c.x * w + obj.x * (1 - w));
            }
            if (!isNaN(c.y)) {
                obj.y = (c.y * w + obj.y * (1 - w));
            }
        });
    }