我试图在加载时仅显示 d3 树布局中特定级别的子级。到目前为止，所有节点(子节点、孙子节点、曾孙节点等)都已显示，这使得页面看起来很奇怪。
这是我的代码:
jQuery(document).ready(function () {
//build tree
function BuildVerticaLTree(treeData, treeContainerDom) {
var margin = { top: 20, right: 120, bottom: 20, left: 120 };
var width = 960 - margin.right - margin.left;
var height = 800 - margin.top - margin.bottom;
var i = 0, duration = 750;
var tree = d3.layout.tree().nodeSize([70, 40]);
//.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function (d) { return [d.x, d.y]; });
var svg = d3.select(treeContainerDom).append("svg")
.attr("width", 1000)
.attr("height", 1000)
.call(zm = d3.behavior.zoom().scaleExtent([1,3]).on("zoom", redraw))
.append("g")
.attr("transform", "translate(" + 350 + "," + 20 + ")");
//necessary so that zoom knows where to zoom and unzoom from
zm.translate([350, 20]);
root = treeData;
update(root);
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 * 100; });
// Declare the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function (d) { return d.id || (d.id = ++i); });
// Enter the nodes.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + source.x0 + "," + source.y0 + ")";
}).on("click", nodeclick);
nodeEnter.append("circle")
.attr("r", 10)
.attr("stroke", function (d) { return d.children || d._children ? "steelblue" : "#00c13f"; })
.style("fill", function (d) { return d.children || d._children ? "lightsteelblue" : "#fff"; });
//.attr("r", 10)
//.style("fill", "#fff");
nodeEnter.append("text")
.attr("y", function (d) {
return d.children || d._children ? -18 : 18;
})
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function (d) { return d.name; })
.style("fill-opacity", 1e-6);
// Transition nodes to their new position.
//horizontal tree
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });
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.x + "," + source.y + ")"; })
.remove();
nodeExit.select("circle")
.attr("r", 1e-6);
nodeExit.select("text")
.style("fill-opacity", 1e-6);
// Update the links…
// Declare the links…
var link = svg.selectAll("path.link")
.data(links, function (d) { return d.target.id; });
// Enter the links.
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 nodeclick(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
}
var treeData =
{
"name": "OLOGBOTTSERE EYINMINSAREN",
"children": [
{
"name": "UWAKUN THE UWANGUE",
"children": [
{
"name": "DIARE",
"children": [
{
"name": "OKOROBOYO",
"children": [
{
"name": "EMMANUEL",
"children": []
},
{
"name": "OGBAWA",
"children": [
{
"name": "ADDIN",
"children": []
}
]
},
{
"name": "EDEMA",
"children": []
},
{
"name": "DIDEN",
"children": []
},
{
"name": "NEBULIAGHANJE",
"children": []
},
{
"name": "EGHERUN",
"children": [
{
"name": "WILFRED",
"children": [
{
"name": "ANDREW",
"children": []
},
]
}
]
},
{
"name": "ITENE",
"children": [
{
"name": "AUGUSTUS",
"children": [
{
"name": "OMADELI",
"children": [
{
"name": "TOSAN",
"children": []
},
{
"name": "RHEMA",
"children": []
}
]
},
{
"name": "UROWOLI",
"children": [
{
"name": "WUWUORITSELA",
"children": []
}
]
},
{
"name": "OFEORITSE",
"children": []
},
{
"name": "ABUGEWA",
"children": [
{
"name": "OMAYELI",
"children": []
},
{
"name": "EMMANUEL",
"children": []
},
]
},
{
"name": "ORITSEWEYINMI",
"children": []
}
]
},
{
"name": "ALBERT",
"children": []
},
{
"name": "ROSALINE",
"children": []
}
]
},
{
"name": "TIMA",
"children": []
},
{
"name": "EDUN",
"children": [
{
"name": "CHARLES",
"children": [
{
"name": "HENRY",
"children": [
{
"name": "TSHEWO",
"children": []
},
{
"name": "ENEDOKPE",
"children": []
},
{
"name": "ORITSHELA",
"children": [
{
"name": "AZARIA",
"children": []
}
]
},
{
"name": "AYETU",
"children": []
},
{
"name": "ORITSENEMI",
"children": []
}
]
}
]
},
{
"name": "JANET",
"children": []
},
{
"name": "GODWIN",
"children": []
},
{
"name": "ALEXANDER",
"children": []
}
]
},
{
"name": "AKPAKE",
"children": []
},
{
"name": "WELEKE",
"children": [
{
"name": "ALICE",
"children": []
},
{
"name": "HANNAH",
"children": []
},
{
"name": "GLADYS",
"children": []
},
{
"name": "KWAME",
"children": []
}
]
},
{
"name": "MENE",
"children": [
{
"name": "ADA",
"children": []
},
{
"name": "ERIC",
"children": []
}
]
},
{
"name": "KUDIEYIN",
"children": [
{
"name": "JOS",
"children": []
},
{
"name": "TOYE",
"children": []
},
{
"name": "ROSE",
"children": [
{
"name": "SAMUEL",
"children": [
{
"name": "MEYIWA",
"children": []
}
]
}
]
},
{
"name": "HELEN",
"children": []
},
{
"name": "MONSIGNOR",
"children": []
}
]
},
{
"name": "UKEGBULI",
"children": []
},
{
"name": "METSERUNEKPE",
"children": [
{
"name": "ABIJOKE",
"children": []
},
{
"name": "DUPE",
"children": []
}
]
},
{
"name": "UYAULITSEMI",
"children": []
},
{
"name": "PIGIN",
"children": [
{
"name": "SAMUEL",
"children": []
},
{
"name": "REV. FELIX",
"children": []
},
{
"name": "THOMPSON",
"children": []
},
{
"name": "CHRISTIANA",
"children": []
}
]
},
{
"name": "UROWOLI",
"children": []
}
]
}
]
}
]
}
]
};
BuildVerticaLTree(treeData, "#genealogy-tree");
});
目前，它显示加载中的所有节点，但我希望它仅显示向下 4 或 5 个级别。我怎样才能实现这个目标？
最佳答案
像上面的示例一样，您可以使用:
root.children.forEach(collapse);
折叠第二级之后的内容 - 即您将仅显示第一级的根和子级。
如果您想从下一个级别开始，您可以将其修改为:
root.children[0].children.forEach(collapse);
对于根加两个级别。
希望有帮助
关于javascript - 如何在 d3 树布局中仅显示特定节点级别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45326393/