title: D3 layout tree is not rendering
body: <p>i don't know why D3 layout tree is not rendering.i wanted to render D3 layout in time being in page body.i have tried to render both "body" or Div but it was not rendered. 
  please suggest?what should be need to done in my side.</p>
  
  <p>below is edited code</p>
  
  <pre><code>    var treeData = {
              name: "/",
              contents: [
          {
              name: "Applications",
              contents: [
                  { name: "Mail.app" },
                  { name: "iPhoto.app" },
                  { name: "Keynote.app" },
                  { name: "iTunes.app" },
                  { name: "XCode.app" },
                  { name: "Numbers.app" },
                  { name: "Pages.app" }
              ]
          },
          {
              name: "System",
              contents: []
          },
          {
              name: "Library",
              contents: [
                  {
                      name: "Application Support",
                      contents: [
                          { name: "Adobe" },
                          { name: "Apple" },
                          { name: "Google" },
                          { name: "Microsoft" }
                      ]
                  },
                  {
                      name: "Languages",
                      contents: [
                          { name: "Ruby" },
                          { name: "Python" },
                          { name: "Javascript" },
                          { name: "C#" }
                      ]
                  },
                  {
                      name: "Developer",
                      contents: [
                          { name: "4.2" },
                          { name: "4.3" },
                          { name: "5.0" },
                          { name: "Documentation" }
                      ]
                  }
              ]
          },
          {
              name: "opt",
              contents: []
          },
          {
              name: "Users",
              contents: [
                  { name: "pavanpodila" },
                  { name: "admin" },
                  { name: "test-user" }
              ]
          }
      ]
      };
      var height = 300;
      var width = 300;
      var diameter = 960;
      var tree = d3.layout.tree()
      .sort(null)
      .size([height, width - 120])
      .children(function (d) {
  
          return (!d.contents || d.contents.length === 0) ? null : d.contents;
      });
  
      var nodes = tree.nodes(treeData);
      var links = tree.links(nodes);
  
      var svg = d3.select("#pie_chart_1").append("svg")
      .attr("width", diameter)
      .attr("height", diameter - 150)
    .append("g")
      .attr("transform", "translate(" + diameter / 2 + ",50)");
  
      var link = d3.svg.diagonal()
       .projection(function (d) {
           return [d.y, d.x];
       });
  
       layoutRoot.selectAll(".link")
       .data(links)
       .enter()
       .append("path")
       .attr("class", "link")
       .attr("d", link);
  
  
  
  
  
  
      var link = svg.selectAll(".link")
    .data(links)
  .enter().append("path")
    .attr("class", "link")
    .attr("d", link);
  
      var nodeGroup = layoutRoot.selectAll(".node")
       .data(nodes)
       .enter()
       .append("g")
       .attr("class", "node")
       .attr("transform", function (d) {
           return "translate(" + d.y + "," + d.x + ")";
       });
  
       nodeGroup.append("circle")
       .attr("class", "node-dot")
       .attr("r", options.nodeRadius);
  
       nodeGroup.append("text")
       .attr("text-anchor", function (d) {
           return d.children ? "end" : "start";
       })
       .attr("dx", function (d) {
           var gap = 2 * options.nodeRadius;
           return d.children ? -gap : gap;
       })
       .attr("dy", 3)
       .text(function (d) {
           return d.name;
       });
  
      }
  </code></pre>