Javascript d3.js树节点布局删除根节点
请注意,我正在寻找一个解决方案,以不显示根节点和连接线到它。 我已经尝试附加多个append(“svg:svg”)并用root.children[…]节点填充它们,但我不喜欢这样,因为我觉得这样效率很低Javascript d3.js树节点布局删除根节点,javascript,d3.js,tree,nodes,Javascript,D3.js,Tree,Nodes,请注意,我正在寻找一个解决方案,以不显示根节点和连接线到它。 我已经尝试附加多个append(“svg:svg”)并用root.children[…]节点填充它们,但我不喜欢这样,因为我觉得这样效率很低 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <link type="t
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="d3/d3.js"></script>
<script type="text/javascript" src="d3/d3.layout.js"></script>
<style type="text/css">
.node circle {
cursor: pointer;
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node text {
font-size: 11px;
}
path.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<div id="body">
<div id="footer">
d3.layout.tree
<div class="hint">click or option-click to expand or collapse</div>
</div>
</div>
<script type="text/javascript">
var m = [20, 120, 20, 120],
w = 1280 - m[1] - m[3],
h = 800 - m[0] - m[2],
i = 0,
root;
var tree = d3.layout.tree()
.size([h, w]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var vis = d3.select("#body").append("svg:svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
d3.json("flare.json", function(json) {
root = json;
root.x0 = h / 2;
root.y0 = 0;
function toggleAll(d) {
if (d.children) {
d.children.forEach(toggleAll);
toggle(d);
}
}
// Initialize the display to show a few nodes.
root.children.forEach(toggleAll);
toggle(root.children[1]);
toggle(root.children[1].children[2]);
toggle(root.children[9]);
toggle(root.children[9].children[0]);
update(root);
});
function update(source) {
var duration = d3.event && d3.event.altKey ? 5000 : 500;
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse();
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });
// Update the nodes…
var node = vis.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("svg:g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", function(d) { toggle(d); update(d); });
nodeEnter.append("svg:circle")
.attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeEnter.append("svg:text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.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", 4.5)
.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 = vis.selectAll("path.link")
.data(tree.links(nodes), function(d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("svg:path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
})
.transition()
.duration(duration)
.attr("d", diagonal);
// 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.
function toggle(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
}
</script>
</body>
</html>
.节点圆{
光标:指针;
填充:#fff;
笔画:钢蓝;
笔划宽度:1.5px;
}
.节点文本{
字体大小:11px;
}
路径链接{
填充:无;
冲程:#ccc;
笔划宽度:1.5px;
}
d3.layout.tree
单击或选项单击以展开或折叠
var m=[20,120,20,120],
w=1280-m[1]-m[3],
h=800-m[0]-m[2],
i=0,
根;
var tree=d3.layout.tree()
.尺寸([h,w]);
var diagonal=d3.svg.diagonal()
.投影(函数(d){返回[d.y,d.x];});
var vis=d3.选择(#body”).追加(“svg:svg”)
.attr(“宽度”,w+m[1]+m[3])
.attr(“高度”,h+m[0]+m[2])
.append(“svg:g”)
.attr(“转换”、“平移”(+m[3]+”、“+m[0]+”));
d3.json(“flare.json”,函数(json){
root=json;
root.x0=h/2;
root.y0=0;
函数toggleAll(d){
如果(d.儿童){
d、 儿童。forEach(toggleAll);
切换(d);
}
}
//初始化显示以显示几个节点。
根。子。forEach(toggleAll);
切换(root.children[1]);
切换(root.children[1].children[2]);
切换(root.children[9]);
切换(root.children[9].children[0]);
更新(根);
});
函数更新(源){
var持续时间=d3.event&&d3.event.altKey?5000:500;
//计算新的树布局。
var nodes=tree.nodes(root.reverse();
//为固定深度进行规格化。
forEach(函数(d){d.y=d.depth*180;});
//更新节点…
var node=vis.selectAll(“g.node”)
.data(节点,函数(d){返回d.id | |(d.id=++i)});
//在父节点的上一个位置输入任何新节点。
var nodeEnter=node.enter().append(“svg:g”)
.attr(“类”、“节点”)
.attr(“transform”,函数(d){return“translate”(“+source.y0+”,“+source.x0+”));})
.on(“单击”,函数(d){切换(d);更新(d);});
追加(“svg:circle”)
.attr(“r”,1e-6)
.style(“fill”,函数(d){return d._children?“lightsteelblue”:“fff”});
追加(“svg:text”)
.attr(“x”,函数(d){返回d.children | | d._children?-10:10;})
.attr(“dy”,“.35em”)
.attr(“文本锚定”,函数(d){return d.children | | d.| u children?“end”:“start”})
.text(函数(d){返回d.name;})
.样式(“填充不透明度”,1e-6);
//将节点转换到其新位置。
var nodeUpdate=node.transition()
.持续时间(持续时间)
.attr(“转换”,函数(d){return“translate”(+d.y+),“+d.x+”);});
节点更新。选择(“圆圈”)
.attr(“r”,4.5)
.style(“fill”,函数(d){return d._children?“lightsteelblue”:“fff”});
nodeUpdate.select(“文本”)
.样式(“填充不透明度”,1);
//将退出节点转换到父节点的新位置。
var nodeExit=node.exit().transition()
.持续时间(持续时间)
.attr(“transform”,函数(d){return“translate”(“+source.y+”,“+source.x+”)”);})
.remove();
nodeExit.select(“圆”)
.attr(“r”,1e-6);
nodeExit.select(“文本”)
.样式(“填充不透明度”,1e-6);
//更新链接…
var link=vis.selectAll(“path.link”)
.data(tree.links(节点),函数(d){return d.target.id;});
//在父对象的上一个位置输入任何新链接。
link.enter().insert(“svg:path”,“g”)
.attr(“类”、“链接”)
.attr(“d”,函数(d){
var o={x:source.x0,y:source.y0};
返回对角线({source:o,target:o});
})
.transition()
.持续时间(持续时间)
.attr(“d”,对角线);
//过渡链接到他们的新位置。
link.transition()
.持续时间(持续时间)
.attr(“d”,对角线);
//将退出节点转换到父节点的新位置。
link.exit().transition()
.持续时间(持续时间)
.attr(“d”,函数(d){
var o={x:source.x,y:source.y};
返回对角线({source:o,target:o});
})
.remove();
//将旧位置隐藏起来,以便过渡。
nodes.forEach(函数(d){
d、 x0=d.x;
d、 y0=d.y;
});
}
//切换儿童。
功能切换(d){
如果(d.儿童){
d、 _children=d.children;
d、 children=null;
}否则{
d、 儿童=d.\U儿童;
d、 _children=null;
}
}
您只需弹出在更新(源)
中创建的最后一个节点,即根节点。
像这样:
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse();
nodes.pop()
您只需弹出在
update(source)
中创建的最后一个节点,即根节点。
像这样:
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse();
nodes.pop()
如果您只有一个根,只需在enter/update行为中添加一个子句,其中
d.depth>0
。由于根节点的深度为0,这将排除它。对于链接,您必须检查源或目标的深度是否为零。如果您只有一个根,只需在enter/update行为中添加一个子句,其中d.depth>0
。由于根节点的深度为0,这将排除它。对于链接,您必须检查源或目标的深度是否为零。