D3 树子节点的分页

Question

我正在尝试在 d3 树中实现分页。谁能帮我做同样的事情。

请在我的代码下方找到当前输出和预期输出的屏幕截图。

data_tree是输入数据变量。这由下面的脚本读取并生成层次结构树，如屏幕截图所示

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 [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.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>

当前输出

预期输出

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;
    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>

D3 树子节点的分页

Paging for D3 tree child nodes

javascript

jquery

d3.js

hierarchy