javascript - How to show only specific node level in d3 tree layout -
i trying show specific level of children in d3 tree layout on load. far, nodes (children, grandchildren, great-grandchildren, etc) displayed, , makes page weird.
here's code:
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 = 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 zoom knows zoom , unzoom zm.translate([350, 20]); root = treedata; update(root); function update(source) { // compute new tree layout. var nodes = tree.nodes(root).reverse(), links = tree.links(nodes); // normalize fixed-depth. nodes.foreach(function (d) { d.y = d.depth * 100; }); // declare nodes… var node = svg.selectall("g.node") .data(nodes, function (d) { return d.id || (d.id = ++i); }); // enter 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 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 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 links… // declare links… var link = svg.selectall("path.link") .data(links, function (d) { return d.target.id; }); // enter 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 new position. link.transition() .duration(duration) .attr("d", diagonal); // transition exiting nodes 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 old positions 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 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"); }); currently, shows nodes on load, want show 4 or 5 levels down. how can achieve this?
by collapse function:
function collapse(d) { if (d.children) { d._children = d.children; d._children.foreach(collapse); d.children = null; } }so can invoke adding
root.children.foreach(collapse); just before main update(root) function.
look @ collapsible d3 treeview example: https://bl.ocks.org/mbostock/4339083
Comments
Post a Comment