D3.js 如何动态更改Reingold的数据–；使用d3的Tilford树

我是d3.js新手，当我想在Reingold–Tilford树中显示节点的不可见子节点时，我遇到了一个问题

当第一次调用update（）时，一切看起来都很好，但是当我单击一个圆圈时，错误就出现了。我的图形中的每个节点似乎都更改了名称或深度，但没有在我的图形中显示其更改

我已经为此工作了一整天，任何建议都将不胜感激！ 我的代码在这里：

 <i> function update(root) {
        //var root = makeD3Data(myroot);
        // if(root==compareroot){
        //     console.log("yes");
        // }else{
        //     console.log("no");
        // }
        // compareroot = root;
        var nodes = tree.nodes(root),
            links = tree.links(nodes);

        var link = svg.selectAll(".link")
            .data(links)
            .enter()
            .append("path")
            .attr("class", "link")
            .attr("d", diagonal)
            .attr("stroke-width", function(d) {
                //return d.target.traffic-100 + "px";
                return "1.5px";
            });

        // force
        //     .nodes(nodes)
        //     .links(links)
        //     .start();


        var tooltip = d3.select("body")
            .append("div")
            .style("position", "absolute")
            .style("z-index", "10")
            .style("visibility", "hidden")
            .text("a simple tooltip");
        var node = svg.selectAll(".node")
            .data(nodes)
            .enter()
            .append("g")
            .attr("class", "node")
            .attr("transform", function(d) {
                return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";
                //return "rotate(" + (d.x - 90) + ")translate(" + source.y + "," + source.x + ")";
            })
            .on("mouseover", function(d) {
                return tooltip.style("visibility", "visible").text(function() {
                    if (d.depth == 3 && d.name != "i am C" && d.name != "i am B" && d.name != "i am A") {
                        return "bytes=" + d.value.bytes + " sip=" + d.value.sip + " dip=" + d.value.dip + " divip=" + d.value.devip +
                            " time=" + d.value.time + " protocol=" + d.value.protocol + " sport=" + d.value.sport + " dport=" + d.value.dport +
                            " pkts=" + d.value.pkts;
                    } else if (d.name == "i am C" || d.name == "i am B") {
                        return d.name;
                    }
                    return "";
                });
            })
            .on("mousemove", function() {
                return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
            })
            .on("mouseout", function() {
                return tooltip.style("visibility", "hidden");
            });

        // var nodeUpdate = node.transition()
        //     .duration(750)
        //     .attr("transform", function(d) {
        //         return "translate(" + d.y + "," + d.x + ")";
        //     });
        node.append("circle")
            .attr("r", 5)
            .on("click", click)
            .style("fill", function(d) {
                if (d.name == "i am B" || d.name == "i am A" || d.name == "i am C") {
                    return "steelblue";
                }
            });
        //.call(force.drag);

        //original text for each node
        node.append("text")
            .attr("dy", ".31em")
            .attr("text-anchor", function(d) {
                return d.x < 180 ? "start" : "end";
            })
            .attr("transform", function(d) {
                return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)";
            })
            .text(function(d) {
                // if(d.depth==3){
                //  return "bytes="+d.value.bytes+"sip="+d.value.sip+"dip="+d.value.dip;
                // }
                return d.name;
            });
    }

    function click(d) {
        if (!d3.event.defaultPrevented) {
            //if(d.name=="i am B"){
            //console.log(root);
            // var newone = jQuery.extend(true,{},d.parent._children[0]);
            // d.parent.children.push(newone) ;
            // d.parent._children = [];
            //d.parent._children.splice(0,1);
            var newchild = {
                "traffic": 1,
                "children": [],
                "name": "tmpqueue"
            };
            d.children.push(newchild);
            // }
            update(root); //[80,8080] has changed its depth
        }
    }</i>

函数更新（根）{
//var root=makeD3Data（myroot）；
//if（根==比较对象）{
//控制台日志（“是”）；
//}其他{
//控制台日志（“否”）；
// }
//compareroot=根；
变量节点=树节点（根），
链接=树。链接（节点）；
var link=svg.selectAll（“.link”）
.数据（链接）
.输入（）
.append（“路径”）
.attr（“类”、“链接”）
.attr（“d”，对角线）
.attr（“笔划宽度”，函数（d）{
//返回d.target.traffic-100+“px”；
返回“1.5px”；
});
//强迫
//.节点（节点）
//.链接（links）
//.start（）；
变量工具提示=d3。选择（“主体”）
.附加（“div”）
.style（“位置”、“绝对”）
.风格（“z指数”、“10”）
.style（“可见性”、“隐藏”）
.text（“简单的工具提示”）；
var node=svg.selectAll（“.node”）
.数据（节点）
.输入（）
.附加（“g”）
.attr（“类”、“节点”）
.attr（“转换”，函数（d）{
返回“旋转（“+（d.x-90）+”）平移（+d.y+”）；
//返回“旋转（“+（d.x-90）+”）平移（“+source.y+”，“+source.x+”）；
})
.on（“鼠标悬停”，功能（d）{
返回tooltip.style（“可见性”、“可见”）.text（函数（）{
如果（d.depth==3&&d.name！=“我是C”&&d.name！=“我是B”&&d.name！=“我是A”）{
返回“bytes=“+d.value.bytes+”sip=“+d.value.sip+”dip=“+d.value.dip+”divip=“+d.value.devip+
“time=“+d.value.time+”protocol=“+d.value.protocol+”sport=“+d.value.sport+”dport=“+d.value.dport+
“pkts=“+d.value.pkts；
}else if（d.name==“我是C”| | d.name==“我是B”）{
返回d.name；
}
返回“”；
});
})
.on（“mousemove”，function（）{
返回tooltip.style（“top”、（d3.event.pageY-10）+“px”）.style（“left”、（d3.event.pageX+10）+“px”）；
})
.on（“mouseout”，函数（）{
返回工具提示样式（“可见性”、“隐藏”）；
});
//var nodeUpdate=node.transition（）
//.持续时间（750）
//.attr（“转换”，函数（d）{
//返回“translate”（“+d.y+”，“+d.x+”）；
//     });
node.append（“圆”）
.attr（“r”，5）
.on（“单击”，单击）
.样式（“填充”，功能（d）{
如果（d.name==“我是B”| | d.name==“我是A”| | d.name==“我是C”）{
返回“钢蓝”；
}
});
//.呼叫（强制拖动）；
//每个节点的原始文本
node.append（“文本”）
.attr（“dy”，“.31em”）
.attr（“文本锚定”，函数（d）{
返回d.x<180？“开始”：“结束”；
})
.attr（“转换”，函数（d）{
返回d.x<180？“平移（8）”：“旋转（180）平移（-8）”；
})
.文本（功能（d）{
//如果（d.深度==3）{
//返回“bytes=“+d.value.bytes+”sip=“+d.value.sip+”dip=“+d.value.dip”；
// }
返回d.name；
});
}
功能点击（d）{
如果（！d3.event.defaultPrevented）{
//如果（d.name==“我是B”）{
//console.log（root）；
//var newone=jQuery.extend（true，{}，d.parent._children[0]）；
//d.父母、子女、推送（新一代）；
//d.父母子女=[]；
//d、 父子拼接（0,1）；
var newchild={
“交通”：1，
“儿童”：[…]，
“名称”：“TMPQUE”
};
d、 推（newchild）；
// }
更新（根）；//[808080]已更改其深度
}
}

单击节点时，会显示其四个不可见的子节点： 以下是我的点击方法：

 function click(d) {
        if (!d3.event.defaultPrevented) {
            if (d.name == "i am A") {
                //console.log(root);
                var i=0;
                while( i < d.parent._children.length) {
                    var newone = jQuery.extend(true, {}, d.parent._children[i]);
                    if (newone.name != null) {

                        d.parent.children.push(newone);
                        update();
                        d.parent._children.splice(i, 1);
                    }
                }
            }
            update();
        }
 }

功能点击（d）{
如果（！d3.event.defaultPrevented）{
如果（d.name==“我是一个”）{
//console.log（root）；
var i=0；
而（i

但是，新的子对象和它的父对象之间的每一条路径都以某种方式与父对象相偏移； 当我显示一个子对象时，我调用update方法来重新加载我的树布局

这是我的更新方法

  function update() {
       var tree = d3.layout.tree()
            .size([360, diameter / 2 - 120])
            .separation(function(a, b) {
                return (a.parent == b.parent ? 1 : 2) / a.depth;
            });
        var nodes = tree.nodes(root),
            links = tree.links(nodes);
       var link = svg.selectAll(".link")
            .data(links,function(d){
                return d.source.name+"-"+d.target.name+"-"+d.source.traffic+d.target.traffic;
            })
            .enter()
            .insert("path")
            .attr("class", "link")
            .attr("d", diagonal)
            .attr("stroke-width", function(d) {
                //return d.target.traffic-100 + "px";
                return "1.5px";
            });

        var node = svg.selectAll(".node")
            .data(nodes,function(d){
                return d.name+" "+d.traffic;
            })
            .enter()
            .append("g")
            .attr("class", "node")
            .attr("transform", function(d) {
                return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";
                //return "rotate(" + (d.x - 90) + ")translate(" + source.y + "," + source.x + ")";
            });


        node.append("circle")
            .attr("r", 5)
            .on("click", click)
            .style("fill", function(d) {
                if (d.name == "i am B" || d.name == "i am A" || d.name == "i am C") {
                    return "steelblue";
                }
            });
        node.append("text")
            .attr("dy", ".31em")
            .attr("text-anchor", function(d) {
                return d.x < 180 ? "start" : "end";
            })
            .attr("transform", function(d) {
                return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)";
            })
            .text(function(d) {
                return d.name;
            });
    }

函数更新（）{
var tree=d3.layout.tree（）
.尺寸（[360，直径/2-120]）
.分离（功能（a、b）{
返回（a.parent==b.parent？1:2）/a.depth；
});
变量节点=树节点（根），
链接=树。链接（节点）；
var link=svg.selectAll（“.link”）
.数据（链接、功能（d）{
返回d.source.name+“-”+d.target。