2
我想在負載上僅顯示d3樹佈局中的特定級別的子級。到目前爲止，所有節點（兒童，孫輩，曾孫等）都顯示出來，並且使頁面看起來很奇怪。如何僅顯示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的水平下降。我怎樣才能做到這一點？
感謝您的回答，但有一個方法可以讓我確定水平數顯示在頁面加載？假設我擁有最多5層的樹，我能在頁面加載時只顯示3個層次嗎？ –