# 径向树图

径向树图是一种用节点来表达当前节点和子节点关系的图形。

基础

# 属性

# 基础

# 系列

  • 树图布局: 树图的布局,有正交和径向两种。

    • 正交布局: 水平和垂直方向。
    • 径向布局: 指以节点为圆心,每一层节点为环,一层层向外发散绘制而成的布局,径向树图默认此选项。
  • 子树折叠展开: 子树折叠和展开的交互,默认打开。由于绘图区域是有限的,而通常一个树图的节点可能会比较多,这样就会出现节点之间相互遮盖的问题。为了避免这一问题,可以将暂时无关的子树折叠收起,等到需要时再将其展开。如上面径向布局树图示例,节点中心用蓝色填充的就是折叠收起的子树,可以点击将其展开。

  • 初始展开层级: 树图初始展开的层级(深度)。

  • 平移缩放: 其余见树图系列

# 视觉映射

组件管理 -> 属性 -> 视觉映射

# 标题

组件管理 -> 属性 -> 标题

# 图例

组件管理 -> 属性 -> 图例

# 提示框

组件管理 -> 属性 -> 提示框

# 工具栏

组件管理 -> 属性 -> 工具栏

# 数据

# 静态数据

基础

上图中的部分示例JSON代码如下:

[
  {
    "source": 0,
    "target": 1,
    "name": "根节点",
    "value": 87
  },
  {
    "source": 1,
    "target": 2,
    "name": "节点1",
    "value": 2
  },
  {
    "source": 2,
    "target": 3,
    "name": "节点1-1",
    "value": 74
  },
  {
    "source": 2,
    "target": 4,
    "name": "节点1-2",
    "value": 80
  },
  {
    "source": 2,
    "target": 5,
    "name": "节点1-3",
    "value": 85
  },
  {
    "source": 2,
    "target": 6,
    "name": "节点1-4",
    "value": 54
  },
  {
    "source": 2,
    "target": 7,
    "name": "节点1-5",
    "value": 24
  },
  {
    "source": 1,
    "target": 8,
    "name": "节点2",
    "value": 39
  },
  {
    "source": 8,
    "target": 9,
    "name": "节点2-1",
    "value": 45
  },
  {
    "source": 8,
    "target": 10,
    "name": "节点2-2",
    "value": 97
  },
  {
    "source": 8,
    "target": 11,
    "name": "节点2-3",
    "value": 18
  },
  {
    "source": 8,
    "target": 12,
    "name": "节点2-4",
    "value": 6
  },
  {
    "source": 8,
    "target": 13,
    "name": "节点2-5",
    "value": 61
  },
  {
    "source": 1,
    "target": 14,
    "name": "节点3",
    "value": 93
  },
  {
    "source": 14,
    "target": 15,
    "name": "节点3-1",
    "value": 69
  },
  {
    "source": 14,
    "target": 16,
    "name": "节点3-2",
    "value": 65
  },
  {
    "source": 14,
    "target": 17,
    "name": "节点3-3",
    "value": 14
  },
  {
    "source": 14,
    "target": 18,
    "name": "节点3-4",
    "value": 55
  },
  {
    "source": 14,
    "target": 19,
    "name": "节点3-5",
    "value": 57
  },
  {
    "source": 1,
    "target": 20,
    "name": "节点4",
    "value": 2
  },
  {
    "source": 20,
    "target": 21,
    "name": "节点4-1",
    "value": 67
  },
  {
    "source": 20,
    "target": 22,
    "name": "节点4-2",
    "value": 53
  },
  {
    "source": 20,
    "target": 23,
    "name": "节点4-3",
    "value": 26
  },
  {
    "source": 20,
    "target": 24,
    "name": "节点4-4",
    "value": 68
  },
  {
    "source": 20,
    "target": 25,
    "name": "节点4-5",
    "value": 80
  },
  {
    "source": 1,
    "target": 26,
    "name": "节点5",
    "value": 51
  },
  {
    "source": 26,
    "target": 27,
    "name": "节点5-1",
    "value": 93
  },
  {
    "source": 26,
    "target": 28,
    "name": "节点5-2",
    "value": 57
  },
  {
    "source": 26,
    "target": 29,
    "name": "节点5-3",
    "value": 53
  },
  {
    "source": 26,
    "target": 30,
    "name": "节点5-4",
    "value": 40
  },
  {
    "source": 26,
    "target": 31,
    "name": "节点5-5",
    "value": 89
  },
  {
    "source": 1,
    "target": 32,
    "name": "节点6",
    "value": 29
  },
  {
    "source": 32,
    "target": 33,
    "name": "节点6-1",
    "value": 39
  },
  {
    "source": 32,
    "target": 34,
    "name": "节点6-2",
    "value": 21
  },
  {
    "source": 32,
    "target": 35,
    "name": "节点6-3",
    "value": 57
  },
  {
    "source": 32,
    "target": 36,
    "name": "节点6-4",
    "value": 7
  },
  {
    "source": 32,
    "target": 37,
    "name": "节点6-5",
    "value": 53
  },
  {
    "source": 1,
    "target": 38,
    "name": "节点7",
    "value": 18
  },
  {
    "source": 38,
    "target": 39,
    "name": "节点7-1",
    "value": 43
  },
  {
    "source": 38,
    "target": 40,
    "name": "节点7-2",
    "value": 64
  },
  {
    "source": 38,
    "target": 41,
    "name": "节点7-3",
    "value": 34
  },
  {
    "source": 38,
    "target": 42,
    "name": "节点7-4",
    "value": 33
  },
  {
    "source": 38,
    "target": 43,
    "name": "节点7-5",
    "value": 83
  },
  {
    "source": 1,
    "target": 44,
    "name": "节点8",
    "value": 12
  },
  {
    "source": 44,
    "target": 45,
    "name": "节点8-1",
    "value": 89
  },
  {
    "source": 44,
    "target": 46,
    "name": "节点8-2",
    "value": 8
  },
  {
    "source": 44,
    "target": 47,
    "name": "节点8-3",
    "value": 52
  },
  {
    "source": 44,
    "target": 48,
    "name": "节点8-4",
    "value": 59
  },
  {
    "source": 44,
    "target": 49,
    "name": "节点8-5",
    "value": 96
  }
]
  • source: 源节点。

  • target: 目标节点。

  • name 维度,节点的名称。

  • value 度量,节点的大小。

提示:

根节点的源节点必须为0或者空。

# 数据资源

基础

# 交互

详见树图交互

# 节点编程

详见树图节点编程

Last Updated: 6/29/2023, 10:50:00 AM