2014-04-01 240 views
0

我不知道爲什麼D3佈局樹不渲染。我想渲染D3佈局及時在頁body.i試圖渲染「身體」或Div但它不是渲染。 請建議?在我身邊需要做些什麼。D3佈局樹不渲染

下面

編輯代碼

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

    } 
+0

您似乎將SVG元素插入到HTML5文檔中。你不需要命名空間'svg:'那裏。 – Sirko

+0

我已經刪除,但它仍然不工作嗎?請建議 – user3310138

+0

當我嘗試測試你的代碼時,很多變量都是未定義的。 – Sirko

回答

0

有幾件事情錯了你目​​前的(因爲)代碼:

  • 最後}已被刪除。
  • layoutRoot是不確定的,可能應該是svg
  • options是不確定的(但是這可能只是在代碼中丟失的部分)。

這是working fiddle

實際上,您應該能夠通過使用控制檯解決所有這些問題,並解決所顯示的問題。