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)
.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")
.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;
}
}