Javascript D3布局树未渲染

我不知道为什么D3布局树没有呈现。我想在页面主体中呈现D3布局。我尝试呈现“主体”或Div，但没有呈现。 请建议？在我身边应该做些什么

下面是经过编辑的代码

    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;
     });

    }

---

您当前的（给定的）代码有几处错误：

• 必须删除最后一个

  }

• layoutRoot

  未定义，可能应该是

  svg

• 选项

  未定义（但这可能只是代码中缺少的一部分）

这是一本书

---

实际上，您应该能够通过使用控制台解决所有这些问题，并解决显示的问题。

您似乎将SVG元素插入到HTML5文档中。您不需要名称空间

svg:

在那里。我已经删除了，但它仍然不起作用？请建议当我尝试测试您的代码时，许多变量未定义。很抱歉，我已经更新了代码，但仍然没有呈现