CODEWITHSUNDEEP
javascriptjqueryd3.jsdiagram
nlv
nlv

Reputation: 831

d3.js network diagram zoom

I have probably a relativly simple question.

Here is my simple diagram enter link description here

And I would love to implement zooming in and out functionality, using the behaviour descibed here enter link description here. But I cant make it work, maybe You would spot the problem.

Thanks for Your time.

The whole zooming in functionality seems to be handled with this assignment and function:

svg = d3.select("body").append("svg").attr("width", width).attr("height", height)
.call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]).on("zoom", zoom));

function zoom() {
svg.clearRect(0, 0, width, height);  
}

Upvotes: 0

Views: 1148

Answers (1)

Gilsha
Gilsha

Reputation: 14591

The code you have tried for zooming is used for canvas. You can use transform attribute for zooming in svg. You can put the whole graph in a (group) element and apply transform attribute to element.

svg = d3.select("body")
         .append("svg")
         .attr("width", width)
         .attr("height", height)
         .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]).on("zoom", zoom))
         .append("g");

function zoom() {
    svg.attr("transform","translate("+ d3.event.translate+") scale("+d3.event.scale+")");  
}

Here is the fiddle

Upvotes: 2

Related Questions