title: d3 force graph zoom in and zoom out issue
body: <p>I have a d3 force graph, but i don't really know how i could zoom in and out.
  Currently to zoom out, i am decreasing the circle radius by 5 and to zoom in i am increasing it by 5.
  The problem is that i don't have an idea, of how to shrink or increase the text size with the circle.</p>
  
  <p><strong>Link to jsFiddle:</strong></p>
  
  <p><a href="http://tinyurl.com/obwqp8b" rel="nofollow">http://jsfiddle.net/s5wfg7g6/2/</a></p>
  
  <p>Code(HTML):</p>
  
  <pre><code>&lt;input type="button" onClick="zoomIn();" value="Zoom In"&gt;
  &lt;input type="button" onClick="zoomOut();" value="Zoom Out"&gt;
  &lt;svg width="500" height="500" style="background-color: lightgrey; border: 1px solid black;"&gt;
  &lt;/svg&gt;
  &lt;script&gt;
  var r = 30;
  function zoomIn()
  {
      r += 5;
      d3.selectAll("circle").attr("r", r);
  }
  function zoomOut()
  {
      r -= 5;
      d3.selectAll("circle").attr("r", r);
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Code(JS):</p>
  
  <pre><code>var nodes = [
      {
          "name": "node1",
          "group": "1"
      },
      {
          "name": "subNode1",
          "group": "1"
      }
  ];
  var links = [
      {
          "source": 0,
          "target": 1
      }
  ];
  var width = 500;
  var height = 500;
  var svg = d3.select("svg");
  var color = d3.scale.category20();
  var textXPlus = 31;
  var textYPlus = 2;
  var force = d3.layout.force()
      .charge(-160)
      .size([width, height])
      .linkDistance(150)
      .nodes(nodes)
      .links(links)
      .start();
  var texts = svg.selectAll("text")
      .data(nodes)
      .enter()
      .append("text")
      .attr("fill", "red")
      .attr("font-family", "sans-serif")
      .attr("font-size", "10px")
      .text(function(d) { return d.name; });
  var links = svg.selectAll("line")
      .data(links)
      .enter()
      .append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });
  var nodes = svg.selectAll("circle")
      .data(nodes)
      .enter()
      .append("circle")
      .attr("r", 30)
      .attr("fill", function(d){ return color(d.group); })
      .call(force.drag);
  force.on("tick", function()
  {
      links.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; });
      nodes.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
      texts.attr("x", function(d){ return d.x + textXPlus; })
      .attr("y", function(d){ return d.y + textYPlus; });     
  });
  </code></pre>