Question

I have a force directed graph and I implemented an autocomplete in order to highlight a node. Basically, once you select a node it is colored in red. I would now like to “zoom” on this node, which is change my window to be 400% the size of the node and the node should be centered in it.

Here are the relevant samples of my code: (or you can directly go to the jsFiddle I setup.)

First the code used to create the svg element:

var w = 4000,
    h = 3000;
var vis = d3.select("#mysvg")
    .append("svg:svg")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("id","svg")
    .attr("pointer-events", "all")
    .attr("viewBox","0 0 "+w+" "+h)
    .attr("perserveAspectRatio","xMinYMid")
    .append('svg:g')
    .call(d3.behavior.zoom().on("zoom", redraw))
    .append('svg:g');

Then, as an example, the function used to redraw the directed graph on “normal” zoom.

function redraw() {
    trans=d3.event.translate;
    scale=d3.event.scale;
    vis.attr("transform",
        "translate(" + trans + ")"
            + " scale(" + scale + ")");
}

Here are the nodes of my graph:

vis.selectAll("g.node")
    .data(nodes, function(d) {return d.id;})
    .enter().append("g")
    .append("circle")
        .attr("id", function(d){return "circle-node-"+ d.id})
        .attr("fill","white")
        .attr("r","50px")
        .attr("stroke", "black")
        .attr("stroke-width","2px");

And finally here is my autocomplete.

$(function() {
    $( "#tags" ).autocomplete({
        source: nodes; //...
        select: function( event, ui){
            // ...
            vis.selectAll("#circle-node-"+ui.item.value)
                .transition()
                .attr("fill", "red")
        }

    })
}); 

I tried to put as little code as possible so, sorry if I forgot something.

Update Here is a jsFiddle illustrating where I am for now.

Answer 1

The scaling and translation should be handled in the same function where you color the node red. You haven’t really described how exactly you want the zoom to behave, but probably the easiest way is to apply translate and scale to the g element containing the graph.

I’ve changed your jsfiddle to do this; result here. I’ve assumed that by “400% the size of the node” you mean that the node should be magnified 400%? I’ve introduced a variable for the zoom factor if you want to change it.