D3.js установите начальный уровень масштабирования

---

У меня есть этот силовой ориентированный график, настроенный для увеличения масштаба контейнера, и он отлично работает. Однако при начальной загрузке уровень масштабирования слишком близок и выглядит не очень хорошо. Есть ли какой-либо способ установить начальный уровень масштабирования дальше, чтобы избежать того, чтобы пользователь сначала уменьшил масштаб. Любая помощь будет очень признательна, спасибо!

Что я уже пробовал:

Вот мой график силы коды

    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;
    }
}

---