title: tree of d3.js looks so crowd when too many data exist
body: <p>i want to use d3.js to make data show in a tree. This is what I have done ,there is a problem that the svg will be so crowd when there are many data exist</p>
  
  <p>Can you help me make it look better. 
  Here is my code</p>
  
  <pre><code>    function update(source) {
      // Compute the new tree layout.
      var nodes = tree.nodes(root).reverse(), links = tree.links(nodes);
      // Normalize for fixed-depth.
      nodes.forEach(function(d) {
          d.y = d.depth * 180;
      });
      // Update the nodes…
      var node = svg.selectAll("g.node").data(nodes, function(d) {
          return d.id || (d.id = ++i);
      });
      // Enter any new nodes at the parent's previous position.
      var nodeEnter = node.enter().append("g").attr("class", "node")
                      .attr("transform", function(d) {
                              return "translate(" + source.y0 + "," + source.x0 + ")";
                      })
                      .on("click", click);
  
      nodeEnter.append("circle")
               .attr("r", 1e-6)
               .style("fill", function(d) {
                   return d._children ? "lightsteelblue" : "#fff";
               });
  
      nodeEnter.append("text")
      .attr("x", function(d) {
          return d.children || d._children ? -10 : 10;
      })
      .attr("dy", ".35em").attr("text-anchor", function(d) {
          return d.children || d._children ? "end" : "start";
      })
      .text(function(d) {
          return d.name;
      })
      .style("fill-opacity", 1e-6);
  
      // Transition nodes to their new position.
      var nodeUpdate = node.transition().duration(duration)
                      .attr("transform", function(d) {
                          return "translate(" + d.y + "," + d.x + ")";
                      });
  
      nodeUpdate.select("circle")
                .attr("r", 4.5)
                .style("fill", function(d) {
                    if (d._children) {
                        return "lightsteelblue";
                    }
                    if (d.isHealth != undefined) {
                        return d.isHealth == false ? "red" : "green";
                    }
                });
  
      nodeUpdate.select("text").style("fill-opacity", 1);
  
      // Transition exiting nodes to the parent's new position.
      var nodeExit = node.exit().transition().duration(duration)
                      .attr("transform", function(d) {
                          return "translate(" + source.y + "," + source.x + ")";
                      }).remove();
  
      nodeExit.select("circle").attr("r", 1e-6);
  
      nodeExit.select("text").style("fill-opacity", 1e-6);
  
      // Update the links…
      var link = svg.selectAll("path.link").data(links, function(d) {
          return d.target.id;
      });
  
      // Enter any new links at the parent's previous position.
      link.enter().insert("path", "g")
                  .attr("class", "link")
                  .attr("d", function(d) {
                      var o = {
                          x : source.x0,
                          y : source.y0
                      };
                      return diagonal({
                          source : o,
                          target : o
                      });
                  });
  
      // Transition links to their new position.
      link.transition().duration(duration).attr("d", diagonal);
  
      // Transition exiting nodes to the parent's new position.
      link.exit().transition().duration(duration)
                  .attr("d", function(d) {
                      var o = {
                          x : source.x,
                          y : source.y
                      };
                      return diagonal({
                          source : o,
                          target : o
                      });
                  }).remove();
  
      // Stash the old positions for transition.
      nodes.forEach(function(d) {
          d.x0 = d.x;
          d.y0 = d.y;
      });
  }
  </code></pre>