D3 layout tree is not rendering

Question

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.

below is edited 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;
     });

    }

Answer 1

There are several things wrong with your current (given) code:

• The last } has to be removed.
• layoutRoot is undefined and probably should be svg
• options is undefined (but that's probably just a missing part in the code).

Here is a working fiddle .

Actually, you should be able to resolve all those problems just by using the console and working your way through the problems shown.