D3.js set initial zoom level

See more:

Javascript

d3js

I have this force directed graph set up to zoom on the container and it works great. However, on the initial load, the zoom level is way too close and doesn't look nice. Is there any way of setting the initial zoom level further to avoid have the user to zoom out first. Any help would be greatly appreciated thank you!

What I have tried:

Here is my force graph codes

    var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height");
<------------------------------------------HERE-------------------------------------->
    var zoom = d3.zoom().on("zoom", zoom_actions);

    vis = svg.append("svg:svg")
     .attr("width", width)
     .attr("height", height)
     .call(zoom) // here
     .call(zoom.transform, d3.zoomIdentity.translate(100, 50).scale(0.5))
      g.append("svg:g")
     .attr("transform","translate(100,50) scale(.5,.5)");


    zoom(svg);
<------------------------------------------HERE-------------------------------------->

    var simulation = d3.forceSimulation()
        .force("link", d3.forceLink().distance(300).id(function(d) {
            return d.id;
        }))
        .force("charge", d3.forceManyBody().strength(-300))
        .force("center", d3.forceCenter(width / 2, height / 2));

    var g = svg.append("g")
        .attr("class", "everything");

    var link = g.append("g")
        .attr("class", "links")
        .selectAll("line")
        .data(graph.links)
        .enter().append("line")
        .style("stroke", linkColour)
        .attr("stroke-width", function(d) {
            return Math.sqrt(d.value);
        });

    var node = g.append("g")
        .attr("class", "nodes")
        .selectAll("g")
        .data(graph.nodes)
        .enter().append("g")

    var circles = node.append("circle")
        .attr("r", 20)
        .attr("fill", circleColour)
        .call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended));

    var lables = node.append("text") // Labeling for nodes
        .text(function(d) {
            return d.id;
        })
        .attr('x', 25)
        .attr('y', 6);

    node.append("title")
        .text(function(d) {
            return d.id;
        });

    simulation
        .nodes(graph.nodes)
        .on("tick", ticked);

    simulation.force("link")
        .links(graph.links);

    function circleColour(d) {
        if (d.group == "1") {
            return "SteelBlue";
        } else if (d.group == "2") {
            return "Lime";
        } else {
            return "HotPink";
        }
    }

    function linkColour(d){
        if(d.type == "A"){
            return "DimGrey";
        } else {
            return "SpringGreen";
        }
    }

    function ticked() {
        link
            .attr("x1", function(d) {
                return d.source.x;
            })
            .attr("y1", function(d) {
                return d.source.y;
            })
            .attr("x2", function(d) {
                return d.target.x;
            })
            .attr("y2", function(d) {
                return d.target.y;
            });
        node
            .attr("transform", function(d) {
                return "translate(" + d.x + "," + d.y + ")";
            })
    };

    function zoom_actions() {
        g.attr("transform", d3.event.transform)
    }

    function dragstarted(d) {
        if (!d3.event.active) simulation.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
    }

    function dragged(d) {
        d.fx = d3.event.x;
        d.fy = d3.event.y;
    }

    function dragended(d) {
        if (!d3.event.active) simulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
    }
}