Paging for D3 tree child nodes-CodePudding

The

Expected output

CodePudding user response：

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; o.y = 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) { d.y = 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) { d.y = 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.x; d.y0 = 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>