javascript d3.js启动树崩溃了

Question

无法弄清楚如何在数据崩溃的情况下启动我的树。试过我能在这里找到的所有解决方案。包含了剪辑的javascript。

人们已经提到改变我没有的JSON文件readme.json。

还试图交换_children和孩子没有成功。

任何帮助都非常感激。

            <script src="d3/d3.min.js"></script>

        <script>
        var treeData = [
            <?php echo $contents ?>
        ];
        // ************** Generate the tree diagram  *****************
        var margin = {top: 20, right: 0, bottom: 0, left: 250},
            width = 1800 - margin.right - margin.left,
            height = 900 - margin.top - margin.bottom;

        var i = 0,
            duration = 750,
            root;
        var tree = d3.layout.tree()
            .size([height, width]);
        var diagonal = d3.svg.diagonal()
            .projection(function(d) { return [d.y, d.x]; });
        var svg = d3.select("body").append("svg")
            .attr("width", width + margin.right + margin.left)
            .attr("height", height + margin.top + margin.bottom)
          .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        root = treeData[0];


        root.x0 = height / 2;
        root.y0 = 0;

        update(root);
        d3.select(self.frameElement).style("height", "400px");
        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 * 360; });
          // 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 + ")"; })
            ;
          nodeEnter.on("click", function (d) {
              click(d);
              var x = d.jobdescription;
              x = x.replace('\\','');
              var g = d3.select(this); // The node
              d3.select("body").select('div.tooltip').remove();
              var div = d3.select("body").append("div")
                          .attr('pointer-events', 'none')
                          .attr("class", "tooltip")
                          .style("opacity", 1)
                          .html(x)
                          .style("left", (d.x + 50 + "px"))
                          .style("top", (d.y +"px"));
               });
          /*nodeEnter.on("mouseout", function (d) {
                    d3.select("body").select('div.tooltip').remove();
                });*/
          nodeEnter.append("circle")
              .attr("r", 1e-6)
              .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
            ;
          nodeEnter.append("text")
              .attr("x", function(d) { var i = ((d.the_length) * 7) + 25; var i2 = -(d.the_length + 10); return d.children || d._children ? i2 : i; })
              .attr("dy", ".35em")
              .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "end"; })
              .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", 10)
              .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
          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;
          });
        }
        // Toggle children on click.
        function click(d) {
          if (d.children) {
            d._children = d.children;
            d.children = null;
          } else {
            d.children = d._children;
            d._children = null;
          }
          update(d);
        }

        </script>