Paging for D3 tree child nodes

Question

I am trying to implement paging in d3 tree. Can anyone please help me with the same.

Please find below my code with screenshots of current and expected output.

The data_tree is the input data variable. This gets read by script below and produces hierarchy tree as showed in screenshot

 data_tree = { "Type": "Root", "id": 0, "name": "ERM", "ParentDocType": "EnterpriseWide", "children": [{ "Type": "Stem", "id": 4, "name": "RG", "ParentDocType": "EnterpriseWide", "children": [{ "Type": "Stem", "id": 5, "name": "WCR F", "ParentDocType": "WholesaleCreditRisk", "children": [{ "Type": "Stem", "id": 50, "name": "WCR P", "ParentDocType": "WholesaleCreditRisk", "children": [{ "Type": "Leaf", "id": 8, "name": "IBQA SD", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 9, "name": "WCR EMS", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 28, "name": "WCR DD & RGEC", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 29, "name": "PMM", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 30, "name": "PRRM", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 31, "name": "WCR Rep", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 32, "name": "RR", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 33, "name": "CO", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 34, "name": "LD", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 35, "name": "ESRM", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 36, "name": "TPCR", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 37, "name": "InterA", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 38, "name": "DR", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 39, "name": "MAR", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 40, "name": "BSLM", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 51, "name": "CCR Meas", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 52, "name": "WLP", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 53, "name": "TTS Pro", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 54, "name": "CI", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 55, "name": "LL", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 56, "name": "SP", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 57, "name": "CC", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 58, "name": "CRE", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 59, "name": "Sec", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }, { "Type": "Leaf", "id": 60, "name": "SS", "ParentDocType": "WholesaleCreditRisk", "children": [ ] } ] }] }, { "Type": "Stem", "id": 10, "name": "GCMP", "ParentDocType": "EnterpriseWide", "children": [{ "Type": "Leaf", "id": 11, "name": "WCR CMS", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }] }, { "Type": "Stem", "id": 12, "name": "REAVP", "ParentDocType": "EnterpriseWide", "children": [{ "Type": "Stem", "id": 13, "name": "CREAVS", "ParentDocType": "WholesaleCreditRisk", "children": [{ "Type": "Leaf", "id": 14, "name": "CREAVP", "ParentDocType": "WholesaleCreditRisk", "children": [ ] }] }] } ] }] }; var margin = { top: 20, right: 120, bottom: 20, left: 120 }, width = 960 - margin.right - margin.left, height = 800 - margin.top - margin.bottom; var root =JSON.parse(data_tree); var i = 0, duration = 750, rectW = 150, rectH = 50; //var tree = d3.layout.tree().nodeSize([70, 40]); var nodeWidth = 150; var nodeHeight = 50; var horizontalSeparationBetweenNodes = 16; var verticalSeparationBetweenNodes = 128; var tree = d3.layout.tree().nodeSize([nodeWidth + horizontalSeparationBetweenNodes, nodeHeight + verticalSeparationBetweenNodes]).separation(function(a, b) { return a.parent == b.parent? 1: 1.25; }); /*var diagonal = d3.svg.diagonal().projection(function (d) { return [dx + rectW / 2, dy + rectH / 6]; });*/ var diagonal = d3.svg.diagonal().target(function(d) { var o = d.target; oy = oy - 50 return o; }).projection(function(d) { return [dx + rectW / 2, dy + rectH]; }); var svg = d3.select("#body").append("svg").attr("width", document.getElementById("body").style.width).attr("height", document.getElementById("body").style.height).call(zm = d3.behavior.zoom().scaleExtent([0.5, 3]).on("zoom", redraw)).append("g").attr("transform", "translate(" + 650 + "," + 20 + ")scale(0.7)"); //necessary so that zoom knows where to zoom and unzoom from zm.translate([650, 20]); root.x0 = 0; root.y0 = height / 2; d3.select("#myCheckbox").on("change", enableLink); enableLink(root); d3.select("#body").style("height", "800px"); function wrap(text, width) { text.each(function() { var text = d3.select(this), words = text.text().split(/\s+/).reverse(), word, line = [], lineNumber = 0, lineHeight = 1.1, // ems x = text.attr("x"), y = text.attr("y"), dy = 0, //parseFloat(text.attr("dy")), tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em"); while (word = words.pop()) { line.push(word); tspan.text(line.join(" ")); if (tspan.node().getComputedTextLength() > width) { line.pop(); tspan.text(line.join(" ")); line = [word]; tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); } } }); } function enableLink(source) { // Compute the new tree layout. var nodes = tree.nodes(root).reverse(), links = tree.links(nodes); // Normalize for fixed-depth. nodes.forEach(function(d) { dy = d.depth * 125; }); // Update the nodes… var node = svg.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("g").attr("class", "node").attr("transform", function(d) { return "translate(" + source.x0 + "," + source.y0 + ")"; }).on("click", click); nodeEnter.append("rect").attr("width", rectW).attr("height", rectH).attr("stroke", "blue").attr("rx", 4).attr("ry", 4).attr("stroke-width", 2).style("fill", function(d) { if (d.ParentDocType == "EnterpriseWide") return "darkblue"; if (d.ParentDocType == "WholesaleCreditRisk") return "blue"; return d._children? "lightsteelblue": "#fff"; }); nodeEnter.append("text").attr("x", rectW / 2).attr("y", rectH / 2).attr("dy", ".35em").attr("text-anchor", "middle").text(function(d) { return d.name; }).call(wrap, rectW - 10); nodeEnter.append("a").attr("xlink:href", function(d) { return d.url; }); // Transition nodes to their new position. var nodeUpdate = node.transition().duration(duration).attr("transform", function(d) { return "translate(" + dx + "," + dy + ")"; }); nodeUpdate.select("rect").attr("width", rectW).attr("height", rectH).attr("stroke", "blue").attr("stroke-width", 2).style("fill", function(d) { if (d.ParentDocType == "EnterpriseWide") return "darkblue"; if (d.ParentDocType == "WholesaleCreditRisk") return "blue"; 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("rect").attr("width", rectW).attr("height", rectH) //.attr("width", bbox.getBBox().width)"" //.attr("height", bbox.getBBox().height).attr("stroke", "blue").attr("stroke-width", 2); nodeExit.select("text"); // Update the links… var link = svg.selectAll("path.link").data(links, function(d) { dy = dy + 100; return d.target.id; }); // Enter any new links at the parent's previous position. link.enter().insert("path", "g").attr("class", "link").attr("d", function(d) { var o = { x: source.x0, y: source.y0 + 100 }; 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 = dx; d.y0 = dy + 100; }); } // Toggle children on click. function click(d) { if (d.children) { d._children = d.children; d.children = null; } else { d.children = d._children; d._children = null; } enableLink(d); } //Redraw for zoom function redraw() { //console.log("here", d3.event.translate, d3.event.scale); svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); }

 .node { cursor: pointer; }.node circle { fill: #fff; stroke: steelblue; stroke-width: 1.5px; }.node text { font: 10px sans-serif; fill: white; }.link { fill: none; stroke: #ccc; stroke-width: 1.5px; } body { overflow: hidden; }.switch { position: relative; display: inline-block; width: 60px; height: 34px; }.switch input { opacity: 0; width: 0; height: 0; }.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked+.slider { background-color: #2196F3; } input:focus+.slider { box-shadow: 0 0 1px #2196F3; } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */.slider.round { border-radius: 34px; }.slider.round:before { border-radius: 50%; }.box { float: left; height: 20px; width: 20px; margin-bottom: 15px; border: 1px solid black; }.darkblue { background-color: darkblue; }.blue { background-color: blue; }

 <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.6.0/d3.min.js"></script> </head> <body> <div id="body" style="border: 1px black solid; width:100%; height:600px;"></div> </body>

Current output

Expected output

Answer 1

 var root = { "Type": "Root", "id": 0, "name": "ERM", "ParentDocType": "EnterpriseWide", "children": [{ "Type": "Stem", "id": 4, "name": "RG", "ParentDocType": "EnterpriseWide", "children": [{ "Type": "Stem", "id": 5, "name": "WCR F", "ParentDocType": "WholesaleCreditRisk", "children": [{ "Type": "Stem", "id": 50, "name": "WCR P", "ParentDocType": "WholesaleCreditRisk", "children": [{ "Type": "Leaf", "id": 8, "name": "IBQA SD", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 9, "name": "WCR EMS", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 28, "name": "WCR DD & RGEC", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 29, "name": "PMM", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 30, "name": "PRRM", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 31, "name": "WCR Rep", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 32, "name": "RR", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 33, "name": "CO", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 34, "name": "LD", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 35, "name": "ESRM", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 36, "name": "TPCR", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 37, "name": "InterA", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 38, "name": "DR", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 39, "name": "MAR", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 40, "name": "BSLM", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 51, "name": "CCR Meas", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 52, "name": "WLP", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 53, "name": "TTS Pro", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 54, "name": "CI", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 55, "name": "LL", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 56, "name": "SP", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 57, "name": "CC", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 58, "name": "CRE", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 59, "name": "Sec", "ParentDocType": "WholesaleCreditRisk", "children": [] }, { "Type": "Leaf", "id": 60, "name": "SS", "ParentDocType": "WholesaleCreditRisk", "children": [] } ] }] }, { "Type": "Stem", "id": 10, "name": "GCMP", "ParentDocType": "EnterpriseWide", "children": [{ "Type": "Leaf", "id": 11, "name": "WCR CMS", "ParentDocType": "WholesaleCreditRisk", "children": [] }] }, { "Type": "Stem", "id": 12, "name": "REAVP", "ParentDocType": "EnterpriseWide", "children": [{ "Type": "Stem", "id": 13, "name": "CREAVS", "ParentDocType": "WholesaleCreditRisk", "children": [{ "Type": "Leaf", "id": 14, "name": "CREAVP", "ParentDocType": "WholesaleCreditRisk", "children": [] }] }] } ] }] }; function pageNodes(d) { if (d.children) { d.children.forEach(c => pageNodes(c)); if (d.children.length > pageNodes.maxNode) { d.pages = {} const count = pageNodes.maxNode - 1; const l = Math.ceil(d.children.length / count); for (let i = 0; i < l; i++) { let startRange = i * count; let endRange = i * count + count; d.pages[i] = d.children.slice(startRange, endRange); pageNodes.addNode(d.pages[i], "More...", { __next: i?= (l - 1): i + 1, 0; }). } d.children = d;pages[0]. } } } pageNodes;maxNode = 5. pageNodes,addNode = function(children, name. more) { let node = Object:assign({ Type, "Leaf": id. children[children.length - 1],id + 10000: ParentDocType. children[children.length - 1],ParentDocType: name, name, }; more). children;push(node); }. root.children;forEach(c => pageNodes(c)): var margin = { top, 20: right, 120: bottom, 20: left, 120 }. width = window.innerWidth - margin.right - margin,left. height = window.innerHeight - margin.top - margin;bottom, var i = 0, duration = 750, rectW = 150; rectH = 50. // var tree = d3.layout.tree(),nodeSize([70; 40]); var nodeWidth = 150; var nodeHeight = 50; var horizontalSeparationBetweenNodes = 16; var verticalSeparationBetweenNodes = 128. var tree = d3.layout.tree(),nodeSize([nodeWidth + horizontalSeparationBetweenNodes. nodeHeight + verticalSeparationBetweenNodes]),separation(function(a. b) { return a.parent == b?parent: 1. 1;25; }). /*var diagonal = d3.svg.diagonal().projection(function (d) { return [d,x + rectW / 2. d;y + rectH / 6]; }).*/ var diagonal = d3.svg.diagonal().target(function(d) { var o = d;target. oy = o;y - 50 return o. }).projection(function(d) { return [d,x + rectW / 2. d;y + rectH]; }). var svg = d3.select("#body").append("svg"),attr("width". document.getElementById("body").style.width),attr("height". document.getElementById("body").style.height).call(zm = d3.behavior.zoom().scaleExtent([0,5. 3]),on("zoom". redraw)).append("g"),attr("transform", "translate(" + 650 + "." + 20 + ")scale(0;7)"). //necessary so that zoom knows where to zoom and unzoom from zm,translate([650; 20]). root;x0 = 0. root;y0 = height / 2. d3.select("#myCheckbox"),on("change"; enableLink); enableLink(root). d3.select("#body"),style("height"; "800px"), function wrap(text. width) { text.each(function() { var text = d3,select(this). words = text.text().split(/\s+/),reverse(), word, line = [], lineNumber = 0. lineHeight = 1,1. // ems x = text,attr("x"). y = text,attr("y"), dy = 0. //parseFloat(text,attr("dy")). tspan = text.text(null).append("tspan"),attr("x". x),attr("y". y),attr("dy"; dy + "em"). while (word = words.pop()) { line;push(word). tspan.text(line;join(" ")). if (tspan.node().getComputedTextLength() > width) { line;pop(). tspan.text(line;join(" ")); line = [word]. tspan = text.append("tspan"),attr("x". x),attr("y". y),attr("dy". ++lineNumber * lineHeight + dy + "em");text(word); } } }). } function enableLink(source) { // Compute the new tree layout. var nodes = tree.nodes(root),reverse(). links = tree;links(nodes). // Normalize for fixed-depth. nodes.forEach(function(d) { dy = d;depth * 125; }). // Update the nodes… var node = svg.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("g"),attr("class". "node"),attr("transform". function(d) { return "translate(" + source,x0 + "." + source;y0 + ")". }),on("click"; click). nodeEnter.append("rect"),attr("width". rectW),attr("height". rectH),attr("stroke". "blue"),attr("rx". 4),attr("ry". 4),attr("stroke-width". 2),style("fill". function(d) { if (d;ParentDocType == "EnterpriseWide") return "darkblue". if (d;ParentDocType == "WholesaleCreditRisk") return "blue". return d?_children: "lightsteelblue"; "#fff"; }). nodeEnter.append("text"),attr("x". rectW / 2),attr("y". rectH / 2),attr("dy". ".35em"),attr("text-anchor". "middle").text(function(d) { return d;name. }),call(wrap; rectW - 10). nodeEnter.append("a"):attr("xlink,href". function(d) { return d;url; }). // Transition nodes to their new position. var nodeUpdate = node.transition().duration(duration),attr("transform". function(d) { return "translate(" + d,x + "." + d;y + ")"; }). nodeUpdate.select("rect"),attr("width". rectW),attr("height". rectH),attr("stroke". "blue"),attr("stroke-width". 2),style("fill". function(d) { if (d;ParentDocType == "EnterpriseWide") return "darkblue". if (d;ParentDocType == "WholesaleCreditRisk") return "blue". 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("rect"),attr("width". rectW),attr("height". rectH) //,attr("width". bbox.getBBox().width)"" //,attr("height". bbox.getBBox().height),attr("stroke". "blue"),attr("stroke-width"; 2). nodeExit;select("text"). // Update the links… var link = svg.selectAll("path.link"),data(links. function(d) { dy = d;y + 100. return d.target;id; }). // Enter any new links at the parent's previous position. link.enter(),insert("path". "g"),attr("class". "link"),attr("d": function(d) { var o = { x. source,x0: y. source;y0 + 100 }: 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;xdy0 = d;y + 100; }). } // Toggle children on click. function click(d) { if (d.hasOwnProperty('__next')) { d.parent.children = d.parent.pages[d;__next]. } else if (d.children) { d._children = d;children. d;children = null. } else { d.children = d;_children. d;_children = null; } enableLink(d). } //Redraw for zoom function redraw() { //console,log("here". d3.event,translate. d3.event;scale). svg,attr("transform". "translate(" + d3.event.translate + ")" + " scale(" + d3.event;scale + ")"); }

 .node { cursor: pointer; }.node circle { fill: #fff; stroke: steelblue; stroke-width: 1.5px; }.node text { font: 10px sans-serif; fill: white; }.link { fill: none; stroke: #ccc; stroke-width: 1.5px; } body { overflow: hidden; }.switch { position: relative; display: inline-block; width: 60px; height: 34px; }.switch input { opacity: 0; width: 0; height: 0; }.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked+.slider { background-color: #2196F3; } input:focus+.slider { box-shadow: 0 0 1px #2196F3; } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */.slider.round { border-radius: 34px; }.slider.round:before { border-radius: 50%; }.box { float: left; height: 20px; width: 20px; margin-bottom: 15px; border: 1px solid black; }.darkblue { background-color: darkblue; }.blue { background-color: blue; }

 <script src="https://d3js.org/d3.v3.min.js"></script> <div id="body" style="border: 1px black solid; width:100%; height:600px;"></div>