g6/packages/site/examples/net/radialLayout/index.zh.md
2023-08-29 15:19:51 +08:00

1001 B
Raw Blame History

title order
Radial 辐射布局 7

Radial 辐射布局根据参数中指定的 focusNode 为中心点,根据其他节点与中心点的拓扑距离(最短路径长度)将其余节点放置在以中心点为圆心的同心圆上。

使用指南

G6 内置的 Radial 布局可在实例化 Graph 时使用该布局。除此之外,还可以如子图布局所示单独使用布局。该布局可以通过配置调整辐射半径、节点不重叠、不严格的辐射布局等。

  • 代码演示 1 :基本的 Radial 布局。
  • 代码演示 2 :根据不同的节点大小计算节点不重叠。
  • 代码演示 3 :不严格的辐射布局允许同层节点有前后交错以避免节点重叠。
  • 代码演示 4 :利用子图布局机制可以实现点击节点进行扩展的功能,请尝试点击 2 号节点。
  • 代码演示 5 Radial 布局参数动态变化。
  • 代码演示 6 :同层节点按照指定字段聚类。