Click here to Skip to main content
15,843,145 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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 ="svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height");
    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))
     .attr("transform","translate(100,50) scale(.5,.5)");


    var simulation = d3.forceSimulation()
        .force("link", d3.forceLink().distance(300).id(function(d) {
        .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")
        .style("stroke", linkColour)
        .attr("stroke-width", function(d) {
            return Math.sqrt(d.value);

    var node = g.append("g")
        .attr("class", "nodes")

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

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

        .text(function(d) {

        .on("tick", ticked);


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

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

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

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

    function dragstarted(d) {
        if (! 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 (! simulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
Updated 18-Jun-18 22:14pm

1 solution

Did you try the accepted solution on the same question on stackoverflow?

javascript - D3.js Set initial zoom level - Stack Overflow[^]
Share this answer
Member 13863747 19-Jun-18 3:07am    
I tried to implement it on my current codes but im not sure if it doesn't work for me or im implementing it wrongly.
[no name] 19-Jun-18 3:09am    
Can you show what you have tried? I don't see the suggested transform and scale anywhere in the code you posted.
Member 13863747 19-Jun-18 3:13am    
I have updated the codes.
[no name] 19-Jun-18 3:26am    
var zoom = d3.behavior.zoom().translate([100,50]).scale(.5);

vis = svg.append("svg:svg")
     .attr("width", width)
     .attr("height", height)
Member 13863747 19-Jun-18 3:37am    
Still no luck here is my JSFiddle please take a look

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900