创建不平衡的d3树形图

Question

所以我试图围绕这两个例子创建一个d3树图 -

http://blog.pixelingene.com/2011/07/building-a-tree-diagram-in-d3-js/

http://bl.ocks.org/d3noob/8324872

它在骨干视图中，我的代码就是这个 -

    render: function() {
        this.margin = {top: 20, right: 120, bottom: 20, left: 120};
        this.width = 960 - this.margin.right - this.margin.left;
        this.height = 500 - this.margin.top - this.margin.bottom;

        var i = 0; 
        var width = this.width;
        var height = this.height;
        var margin = this.margin;



        this.tree = d3.layout.tree()
            .size([this.height, this.width])
            .children(function(d) {
                return (!d.children || d.children.length === 0) ? null: d.children;
            });

        this.diagonal = d3.svg.diagonal()
            .projection(function(d) { return [d.y, d.x];});


        this.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 = this.getFunctionData();

            this.update(root);

        return this;
    },

    update: function(source) {
        var tree = this.tree;
        var nodes = tree.nodes(root).reverse(),
            links = tree.links(nodes);
        var diagonal = this.diagonal;

        //debugger

        nodes.forEach(function(d) { d.y = d.depth * 180;});

        var node = this.svg.selectAll("g.node").data(nodes, function(d,i) { return d.id || (d.id = ++i); });

        var nodeEnter = node.enter().append("g")
            .attr("class", "node")
            .attr("transform" , function(d) {
                return "translate(" + d.y + "," + d.x + ")";
            });

        nodeEnter.append('circle')
            .attr('r', 10)
            .style('stroke', function(d) { return d.type;})
            .style("fill", function(d) { return d.children ? "lightsteelblue" : "#fff";});

        // var nodeUpdate = node.transition()
        //  .duration(duration)
        //  .attr('transform', function(d) { return "translate(" + d.y + "," + d.x + ")";});

        // nodeUpdate.select("circle")
        //  .attr('r', 4.5)
        //  .style('fill', function(d) { return d.children ? "lightsteelblue" : "#fff";});



        this.svg.selectAll("path.link")
            .data(links)
            .enter()
            .append("svg:path")
            .attr("class", "link")
            .attr("d", diagonal);



        // var link = this.svg.selectAll("path.link")
        //  .data(links, function(d) { 
        //      //debugger
        //      return d.target.id});

        // link.enter().insert("path", "g")
        //  .attr("class", "link")
        //  .attr("d", diagonal);
    },

    getFunctionData: function() {
            var treeData = 
              {
                "name": "Top Level",
                "parent": "null",
                "value": 10,
                "type": "black",
                "level": "red",
                "children": [
                  {
                    "name": "Level 2: A",
                    "parent": "Top Level",
                    "value": 15,
                    "type": "grey",
                    "level": "red",
                    "children": [
                      {
                        "name": "Daughter of A",
                        "parent": "Level 2: A",
                        "value": 8,
                        "type": "steelblue",
                        "level": "red"
                      }
                    ]
                  },
                  {
                    "name": "Level 2: B",
                    "parent": "Top Level",
                    "value": 10,
                    "type": "grey",
                    "level": "green"
                  }
                ]
              };


        return treeData;

根据以上数据，我得到了这个 -

因此两个节点没有链接。

如果我平衡树数据，一切正常。

为什么会这样？我怎样才能创建一个不平衡的树，或者一个具有奇数个孩子的节点的树？