I have several graphs set up to zoom on the container and it works great. However, on the initial load, the zoom level is way too close. Is there a method of setting the initial zoom level to avoid having to first zoom out? I am familiar with the .scale() method but have not had any luck implementing it. Is this the way to go or is there something I am missing?

Here is what I have thus far as pertaining to zoom:

var margin = {top: 20, right: 120, bottom: 20, left: 120},

    width = 50000 - margin.right - margin.left,

    height = 120000 - margin.top - margin.bottom;



var x = d3.scale.linear()

    .domain([0, width])

    .range([0, width]);



var y = d3.scale.linear()

    .domain([0, height])

    .range([height, 0]);



var tree = d3.layout.tree()

    .size([height, width])

    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });



var diagonal = d3.svg.diagonal()

    .projection(function(d) { return [d.x, d.y]; });



function zoom(d) {        

  svg.attr(transform,

      translate( + d3.event.translate + )+  scale( + d3.event.scale + ));

}



var svg = d3.select(body).append(svg)

    .attr(width, width + margin.right + margin.left)

    .attr(height, height + margin.top + margin.bottom)

  .append(g)

    .attr(transform, translate( + margin.left + , + margin.top + ))

    .attr(pointer-events, all)

    .call(d3.behavior.zoom()

        .x(x)

        .y(y)

        .scaleExtent([0,8])

        .on(zoom, zoom))

        .append('g');



svg.append('rect')

    .attr('width', width*5)

    .attr('height', height)

    .attr('border-radius', '20')

    .attr('fill', 'sienna');