笔记

Appearance

大纲

图的布局 - 树形布局 ​

树形布局的图使用 TreeGraph 创建, 默认 'dendrogram'

树形布局支持树形结构的数据

ts
const treeData = {
  id: "root",
  children: [
    { id: "child1" },
    {
      id: "child2",
      children: [{ id: "leaf1" }, { id: "leaf2" }, { id: "leaf3" }],
    },
  ],
};

CompactBox ​

紧凑树布局，从根节点开始，同一深度的节点位于同一层，考虑节点大小

ts
interface CompactBox {
  direction?: "TB" | "BT" | "LR" | "RL" | "H" | "V"; // 'TBLR' 为方位简写, 默认 'LR', 'H'-根节点于中间水平对称布局, 'V'-根节点于中间垂直对称布局
  getId?: (d: Node) => string; // 节点 id
  getHeight?: (d: Node) => number; // 节点高度
  getWidth?: (d: Node) => number; // 节点宽度
  getVGap?: (d: Node) => number; // 节点纵向间距
  getHGap?: (d: Node) => number; // 节点横向间距
  radial?: boolean; // 是否辐射状布局, 默认 false, 若置为 true, 建议 direction 为 'LR' 或 'RL'
}

Dendrogram ​

生态树布局，不论数据深度层数，叶节点总是对齐，不考虑节点大小(视为 1 个像素点)

ts
interface Dendrogram {
  direction?: "TB" | "BT" | "LR" | "RL" | "H" | "V"; // 'TBLR' 为方位简写, 默认 'LR', 'H'-根节点于中间水平对称布局, 'V'-根节点于中间垂直对称布局
  nodeSep?: number; // 节点间距
  rankSep?: number; // 层间距
  radial?: boolean; // 是否辐射状布局, 默认 false, 若置为 true, 建议 direction 为 'LR' 或 'RL'
}

Indented ​

缩进树布局，类似文件目录，每个元素占一行/列

ts
interface Indented {
  direction?: "LR" | "RL" | "H"; // 'TBLR' 为方位简写, 默认 'LR', 'H'-根节点于中间水平对称布局,
  indent?: number; // 列间距, 默认 20
  getHeight?: (d: Node) => number; // 节点高度
  getWidth?: (d: Node) => number; // 节点宽度
  getSide?: (d: Node) => "left" | "right"; // 节点及后代的放置位置(左或右)，仅与根节点相连的节点生效
  align?: "center" | undefined; // 默认 'center'
}

Mindmap ​

脑图布局，深度相同的节点位于同一层，但不考虑节点大小

ts
interface Mindmap {
  direction?: "H" | "V"; // 默认 'H', 'H'-根节点于中间水平对称布局, 'V'-根节点子节点纵向排列
  getHeight?: (d: Node) => number; // 节点高度
  getWidth?: (d: Node) => number; // 节点宽度
  getVGap?: (d: Node) => number; // 节点纵向间距
  getHGap?: (d: Node) => number; // 节点横向间距
  getSide?: (d: Node) => "left" | "right"; // 节点及后代的放置位置(左或右)，仅与根节点相连的节点生效
}