我是d3.js的新手，当我想在Reingold-Tilford Tree中显示一个节点的隐形孩子时，我遇到了一个问题。
首次调用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>
当我点击一个节点时，我显示了四个不可见的孩子： 这是我的点击方法：
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();
}
}
但新孩子和它的父母之间的每条路径都以某种方式抵消了父母; 当我显示一个孩子时，我调用了更新方法来重新加载我的树形布局。
这是我的更新方法
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;
});
}