I've recently discovered how to add zoom behaviour on D3js graphs. It's pretty cool you can zoom in and out with mouse scroll.
I have appended one g element with id zoomy on svg and one more g on that first g where I draw all the nodes of graph.
Before:
var vis = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h)
.attr("id","canvasd3")
.append("g");
After:
var vis = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h)
.attr("id","canvasd3")
.append("g")
.attr("id","zoomy")
.append("g");
And I added zoom and redraw function:
var zoom = d3.select("#canvasd3")
.call(d3.behavior.zoom().scaleExtent([.5, 3]).on("zoom",redraw)).on("dblclick.zoom", null);
function redraw() {
d3.select("#zoomy")
.attr("transform", "translate(" + (d3.event.translate) + ")" + " scale(" + d3.event.scale + ")");
}
Now the issue I have is with version 3 of d3js library. When I use version 2 the nodes are draggable as before zoom behjaviour added, but on d3.v3.js when you try to drag one nodes, the whole graph gets dragged which is really annoying.
Try to drag nodes on both links, with the same code from me but with different library (see external resources) versions so you can see what is a problem:
version 2 d3js library (good drag behaviour): http://jsfiddle.net/Yx8SD/
version 3 d3js library (bad drag behaviour): http://jsfiddle.net/t4Ubb/
I do not know what property do I need to modify to work like in version 2, is it even possible with that kind of zoom and graph? I really wanna use the newer version 3 of D3js. I'm getting really mad already...
P.S. I've described the zoom add-on because without this option the graph and the dragging of nodes is working like it supposed to so maybe the problem is in this zoom function.
Any suggestion or help is welcome