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

img


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

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

不显示标题把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好想并不能很好地渲染

id字段改为空就行了,例如

export default {
    id: '',
    children: [
      {
        id: '',
        children: [
          {
            id: '',
          },
          {
            id: '',
          },
          {
            id: '',
          },
          {
            id: '',
          },
          {
            id: '',
          },
          {
            id: '',
          },
          {
            id: '',
          },
          {
            id: '',
          },
        ],
      },
      {
        id: '',
        children: [
          {
            id: '',
            children: [
              {
                id: '',
              },
              {
                id: '',
              },
              {
                id: '',
              },
              {
                id: '',
              },
              {
                id: '',
              },
              {
                id: '',
              },
            ],
          },
          {
            id: '',
            children: [
              {
                id: '',
              },
              {
                id: '',
              },
            ],
          },
          {
            id: '',
            children: [
              {
                id: '',
              },
              {
                id: '',
              },
              {
                id: '',
              },
            ],
          },
        ],
      },
      {
        id: '',
        children: [
          {
            id: '',
          },
          {
            id: '',
          },
          {
            id: '',
          },
          {
            id: '',
          },
          {
            id: '',
          },
        ],
      },
    ],
  };