gojs径向布局

官网例子https://gojs.net/latest/samples/radial.html

需要引入官网的RadialLayout.js文件<script src="js/RadialLayout.js"></script>
gojs径向布局

最大圈数定义 maxLayers:2
每圈半径定义 layerThickness:100

节点布局重定义

rotateNode

rotateNode:function(node, angle, sweep, radius) {

    //node 节点对象,

    //angle 逆时针角度,用于定义节点旋转摆放的方向

     node.angle=angle;

    //sweep 顺时针角度,可设置节点node.angle=sweep ;

    //radius 半径,通过半径可知节点在第几圈上

}

线圈重定义

commitLayers

commitLayers: function() {

}

特殊例子,如果半径要以中心节点边界计算,从中心节点边界到第一圈的距离要和半径相等,使得中心节点过大的情况下不会太接近第一圈或者覆盖第一圈,解决方案,修改RadialLayout.js中布局算法的第177行追加中心节点半径即可

 

gojs径向布局

有线圈自定义的,也需要修改线圈自定的半径算法

gojs径向布局

 

相关文章:

  • 2021-06-27
  • 2022-12-23
  • 2022-12-23
  • 2022-01-31
  • 2022-12-23
  • 2021-09-01
  • 2022-02-25
猜你喜欢
  • 2021-08-08
  • 2022-01-06
  • 2021-04-25
  • 2022-12-23
  • 2022-12-23
  • 2022-02-16
  • 2022-01-27
相关资源
相似解决方案