CODEWITHSUNDEEP
jqueryd3.jsforce-layout
vishB
vishB

Reputation: 1688

D3.js scale initial zoom level

I have created a d3.js force layout, and want to set initial zoom level based on screen resolution. I have implemented it on page load using jQuery with static scale value, and it works fine but when I zoomin it zooms directly to default scale.

Here's the code:

var svg = d3.select("#grapharea")
.append("svg:svg")
.attr("width", width)
.attr("height", height)
.call(d3.behavior.zoom().scaleExtent([0.2, 3]).on("zoom", redraw)).on("dblclick.zoom", null)
.append('svg:g');

$( document ).ready(function() {
  scale = (0.24758571798325626);
  translate = [width*40/100,height*37/100];      
  svg.transition()
    .duration(750)
    .attr("transform", "translate(" + translate + ")scale(" + scale +    ")");
});

Is there a way to set default scale value on page load, such that when I zoomin it zooms normally.

Upvotes: 2

Views: 1697

Answers (1)

Mauricio Poppe
Mauricio Poppe

Reputation: 4876

I haven't tested this solution but I think you need to update the scale/translate properties of the zoom behavior when the transition ends:

var zoomBehavior = d3.behavior.zoom()
  .scaleExtent([0.2, 3])
  .on("zoom", redraw);

var svg = d3.select("#grapharea")
.append("svg:svg")
.attr("width", width)
.attr("height", height)
.call(zoomBehavior)
.append('svg:g');

$( document ).ready(function() {
  scale = (0.24758571798325626);
  translate = [width*40/100,height*37/100];      
  svg.transition()
    .duration(750)
    .attr("transform", "translate(" + translate + ")scale(" + scale +    ")")
    .each("end", function () {
      zoomBehavior
        .scale(scale)
        .translate(translate);
    });
});

Upvotes: 2

Related Questions