Zoom to fit Force layout in D3 - d3.js

Question

I have the following Force layout graph in my D3 code...
// Code goes here
var width = w = 300,
height = h = 300,
link,
node,
svg,
force,
drag,
currentSelected;
function tick() {
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("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
}
var graph = {
"nodes":
[
{
"code": "1130",
"name": "Interior",
"title": "Interior",
"id": 137,
"label": "ATAChild"
},
{
"code": "50",
"name": "Loose Equipment",
"title": "Loose Equipment",
"id": 146,
"label": "ATAChild"
},
{
"code": "2781 ",
"name": "LE FLAP POSITION IND SYSTEM",
"title": "LE FLAP POSITION IND SYSTEM",
"id": 218,
"label": "ATAChild"
},
{
"code": "2830 ",
"name": "FUEL DUMP",
"title": "FUEL DUMP",
"id": 227,
"label": "ATAChild"
},
{
"code": "1130",
"name": "Interior",
"title": "Interior",
"id": 138,
"label": "ATAChild"
},
{
"code": "50",
"name": "Loose Equipment",
"title": "Loose Equipment",
"id": 147,
"label": "ATAChild"
},
{
"code": "2781 ",
"name": "LE FLAP POSITION IND SYSTEM",
"title": "LE FLAP POSITION IND SYSTEM",
"id": 219,
"label": "ATAChild"
},
{
"code": "2830 ",
"name": "FUEL DUMP",
"title": "FUEL DUMP",
"id": 228,
"label": "ATAChild"
},
{
"code": "1130",
"name": "Interior",
"title": "Interior",
"id": 139,
"label": "ATAChild"
},
{
"code": "50",
"name": "Loose Equipment",
"title": "Loose Equipment",
"id": 148,
"label": "ATAChild"
},
{
"code": "2781 ",
"name": "LE FLAP POSITION IND SYSTEM",
"title": "LE FLAP POSITION IND SYSTEM",
"id": 220,
"label": "ATAChild"
},
{
"code": "2830 ",
"name": "FUEL DUMP",
"title": "FUEL DUMP",
"id": 229,
"label": "ATAChild"
}
],
"links":
[
]
}
function render() {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
link = link.data(graph.links)
.enter().append("line")
.attr("class", "link");
node = node.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 12)
.call(drag);
}
function init() {
force = d3.layout.force()
.size([width, height])
.charge(-400)
.linkDistance(40)
.on("tick", tick);
svg = d3.select("#graph").append("svg")
.attr("width", width)
.attr("height", height);
drag = force.drag();
link = svg.selectAll(".link");
node = svg.selectAll(".node");
}
window.onload = function(){
init();
render();
}
<div id="graph" class="full"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
Now I am fairly new to D3 but as you can see my issue is that you cannot see all the nodes. I am not sure what is happening here but I would like to have it zoom out so that even if it is painfully small I can still see all nodes. I have seen some answers related to zooming but I have had no luck getting it to work with the force layout. Im you need to play around I have a plnkr as well.