x6树状布局学习碎片

x6还是个很好的引擎的，只可惜官网的某些配置不够详尽。在使用树状布局时，官网的示例和api里都只用简单的代码指明用法，但是事实上，他们的代码可以做到的事情远不止示例，而且单纯的示例代码有很多误导性，不足以满足我的使用场景，需要看源码才能了解详细的配置。以下是我看源码得到的一些对于树状布局用法的学习碎片，也不是很完整，更多的配置还得看源码才行。

2021-03-25 17:18 更新：x6布局使用的是antv可视化的布局依赖，其文档应见此G6紧凑树文档

x6 树状布局学习碎片

这是 x6 官网的树状布局示例，但是并没有过多的解释。官网示例

fetch('../data/algorithm-category.json')
  .then((response) => response.json())
  .then((data) => {
    const result = Hierarchy.mindmap(data, {
      direction: 'V',
      getHeight() {
        return 16
      },
      getWidth() {
        return 16
      },
      getHGap() {
        return 100
      },
      getVGap() {
        return 1
      },
      getSide: () => {
        return 'right'
      },
    })
    const model: Model.FromJSONData = { nodes: [], edges: [] }
    const traverse = (data: HierarchyResult) => {
      if (data) {
        model.nodes?.push({
          id: `${data.id}`,
          x: data.x + 250,
          y: data.y + 250,
          shape: 'circle',
          width: 16,
          height: 16,
          attrs: {
            body: {
              fill: '#855af2',
              stroke: 'transparent',
            },
          },
        })
      }
      if (data.children) {
        data.children.forEach((item: HierarchyResult) => {
          model.edges?.push({
            source: `${data.id}`,
            target: `${item.id}`,
            attrs: {
              line: {
                stroke: '#ccc',
                strokeWidth: 1,
                targetMarker: null,
              },
            },
          })
          traverse(item)
        })
      }
    }
    traverse(result)
    graph.fromJSON(model)
  })
interface HierarchyResult {
  id: number
  x: number
  y: number
  children: HierarchyResult[]
}

Hierarchy.mindmap(data, options)

接收两个参数，第一个参数是树，第二个参数是定义树结构信息的配置项
- data：一个合法的树，一般的结构如上述的 HierarchyResult，但是 id 和 children 可以不同，只需要在 options 里进行定义相应的 get 方法即可
- options：一些提取树结构信息的配置
  - direction：定义树的方向，可选值有LR（左到右）、RL（右到左）、TB（上到下）、BT（下到上）、H（横向）、V（纵向），其中，LR、TB 本质一样，RL、BT 本质一样，H 或 V 可以构建左右同时存在的“树”，或者上下同时存在的“树”，但具体渲染为横向还是纵向，不取决于这些值！！！
  - getHeight(d)：返回节点高度，即 d.height，默认值 36
  - getWidth(d)：返回节点宽度，即 d.width，默认值取 d.label 的字数*18，例如 d.label = ‘abcd’，则字数为 4，宽度为 72
  - getChildren(d)：返回节点的儿子节点，默认为 d.children
  - getId(d)：返回节点的唯一标识，默认取 d.id || d.name
  - getHGap(d)：返回节点的横向间距，即 d.hGap，默认 18
  - getVGap(d)：返回节点的纵向间距，即 d.vGap，默认 18
  - getSide(d)：极其重要的方法，可以区分左右树或者上下树，返回节点的方向，可选值 left 和 right，不同的节点设置不同的值，即可将树分为左右或者上下结构
    - 当设置为 left，树向左（横向时）、向上（纵向时）渲染
    - 当设置为 right，树向右（横向时）、向下（纵向时）渲染
返回的值形如下代码，已经是一个完整计算好的树状结构了

{
  data,
  id,
  children:array
  vGap,
  hGap,
  height,
  width
}

traverse(data)

一个递归函数，由用户自己定义节点细节，目的是为了得到形如 Model.FromJSONData 的一个对象，包含 nodes 和 edges 数组。
nodes 是一个 Node 的数组，配置和基本的 Node 配置完全一致，但是，根据 x 和 y 从 data 的选值不同，可以使渲染的结果为横向或纵向，例如

// 以下结果渲染为横向
{
  x: data.x,
  y: data.y,
}
// 以下结果渲染为纵向
{
  x: data.y,
  y: data.x
}
// 示例中的+250 只是为了做整体的偏移，并不必要加，之后可以使用 x6 的其他转换方法使图形位置摆正
// 如 zoomToFit()，可以自动放缩图形，使图形充满画布，或者 positionContent()，平移使内容显示在画布中，具体内容参见其详细文档