d3.js v3.5树形结构子节点分页适配及异常问题咨询

问题修复方案 #

核心问题原因 #

原有代码使用了ES6新增的对象展开运算符、箭头函数等高版本语法，d3.js v3.5对应的运行环境普遍不支持该类语法，导致分页首尾的...节点生成失败，名称无法正常显示。

适配修改内容 #

1. 替换所有ES6高版本语法为ES5兼容写法，适配v3.5运行环境
2. 增加叶子节点判断逻辑，仅当父节点的所有子节点均为叶子节点时才触发分页，不对中间分支节点生效
3. 调整节点属性赋值逻辑，适配d3.js v3.5的树形节点结构

完整修改后代码 #

function pageNodes(d, maxNode) {
  if (d.children) {
    // 替换箭头函数为ES5兼容写法
    d.children.forEach(function(c) {
      pageNodes(c, maxNode);
    });
    // 增加叶子节点判断：只有所有子节点都没有children/_children时才触发分页
    var isAllLeaf = d.children.every(function(child) {
      return !child.children && !child._children;
    });
    if (isAllLeaf && d.children.length > maxNode) {
      d.pages = {};
      var count = maxNode - 2;
      var l = Math.ceil(d.children.length / count);
      for (var i = 0; i < l; i++) {
        var startRange = i * count;
        var endRange = i * count + count;
        d.pages[i] = d.children.slice(startRange, endRange);
        // 替换展开语法，手动遍历拷贝属性，兼容旧JS环境
        var prevPageNode = {};
        for (var k in d.pages[i][0]) {
          prevPageNode[k] = d.pages[i][0][k];
        }
        prevPageNode.data = { name: "..." };
        prevPageNode.page = i == 0 ? l - 1 : i - 1;
        d.pages[i].unshift(prevPageNode);

        var nextPageNode = {};
        for (var k in d.pages[i][0]) {
          nextPageNode[k] = d.pages[i][0][k];
        }
        nextPageNode.data = { name: "..." };
        nextPageNode.page = i != (l - 1) ? i + 1 : 0;
        d.pages[i].push(nextPageNode);
      }
      d.children = d.pages[0];
    }
  }
}
root.children.forEach(function(c) {
  pageNodes(c, 8);
});

function click(d) {
  if (d.hasOwnProperty('page')) {
    d.parent.children = d.parent.pages[d.page];
  } else if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(d);
}

验证说明 #

调整后代码已移除所有高版本JS语法，分页仅会作用于全是叶子节点的父层级，首尾...节点可以正常生成显示，完全兼容d3.js v3.5版本。

内容的提问来源于stack exchange，提问作者IlludiumPu36