缩放以适应D3中的Force布局

Question

我的D3代码中有以下强制布局图...

// 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>

现在我对D3很新，但你可以看到我的问题是你看不到所有的节点。我不确定这里发生了什么，但我想让它缩小，以便即使它很小，我仍然可以看到所有节点。我已经看到了一些与缩放相关的答案，但是我没有运气来使用力布局。我需要你玩，我也有plnkr。