这棵紧凑数的代码谁会改一下呢？

Question

https://antv-f6.gitee.io/zh/docs/examples/tree/compactBox

这里的代码，我想弄成100层的，但是每个节点又不想要标题，请问能不能帮我搞一下data.js文件呢？
请注意图中④的注解，也即如下需求：
1、不要这些标题。
2、只要圆点。
3、而且整棵树需要向下发展100层,甚至200层。
4、我想看看到到100层时，这棵树会是怎么样的呢。

Answer 1

不显示标题把index.js中第126行的label: node.id注释掉就可以，

this.graph.node(function(node) {
      let position = 'right';
      let rotate = 0;
      if (!node.children) {
        position = 'bottom';
        rotate = Math.PI / 2;
      }
      return {
        // 不显示标题注释掉
        // label: node.id,
        labelCfg: {
          position,
          offset: 5,
          style: {
            rotate,
            textAlign: 'start',
          },
        },
      };
    });

显示100层数据，写个自动生成数据的方法即可，修改data.js：

// level为显示的层数，num为每个节点的子节点数量
function treeData(level, num = 2) {
  const res = {id: Math.random() + '', children: []}
  const fn = (res, curLevel) => {
    if (curLevel === level) return
    for (let i = 0; i < num; i++){
      const item = {id: Math.random() + '', children: []}
      res.push(item)
      fn(item.children, curLevel + 1)
    }
  }
  fn(res.children, 1)
  return res
}

const data = treeData(5)

export default data

事实上，你即使显示20层数据，每个节点2个子节点，就有2^20-1个节点了，那就是十多万的节点数，对于这个量级数据，f6好想并不能很好地渲染