关系图的节点圆形排布的位置计算 graph

最新推荐文章于 2024-06-20 22:10:34 发布

原创最新推荐文章于 2024-06-20 22:10:34 发布 · 310 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

该文章介绍了一种在圆内均匀分布节点的算法，考虑了节点大小和圆的半径。通过转换角度为弧度，计算每个节点的位置，确保它们紧贴圆的边缘，并可以根据起始角度和圆的范围进行定制。此外，还处理了不同象限中节点的位置调整，以使它们正确贴合圆形内部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面描述了在圆里面如何布局位置点，需要注意的是，需要根据r和节点的大小，来计算不同层次的圆形上可以放几个节点。
对于节点外部一级节点，一级节点有自己的节点，则是两个圆，其中中心节点到一级节点的r应该是一级节点中最大的r1的值大一点。

/**
 * 目标：
 * 1. 围绕圆旋转
 * 2. 在圆的内部紧贴边缘
 * 3. 可以指定开始结束位置
 * 4. 依次均匀分开摆放
 */
const container = document.querySelector('.container')
const containerWidth = container.clientWidth
const circleList = Array.from(document.querySelectorAll('.circle__item'))
// 角度转弧度
const transformToRadians = (degrees) => degrees * (Math.PI / 180)
// 圆半径
const circleRadius = containerWidth / 2
// 圆心
const circlePointX = circleRadius
const circlePointY = circleRadius
// 划分多少等分
const count = circleList.length

/**
 * @description: 根据已知角度算出每个元素的具体位置
 * @param {number} angleStart 开始的角度
 * @param {number} circle 划分多大的圆
 */
let cache = {}
function changeItemAngle(
  options = {
    angleStart: 200,
    circle: 330,
  }
) {
  cache = {
    ...cache,
    ...options,
  }
  // 划分的角度
  const angle = Math.floor(cache.circle / count)

  circleList.forEach((item, index) => {
    // 转为 0 - 360 度
    const itemAngle = (angle * (index + 1) + cache.angleStart) % 360
    // 弧度
    const itemRadians = transformToRadians(itemAngle)
    const { clientWidth, clientHeight } = item

    let top = circleRadius * Math.sin(itemRadians) + circlePointY
    let left = circleRadius * Math.cos(itemRadians) + circlePointX

    // 为了让子节点紧贴圆内壁
    if (itemAngle < 90 && itemAngle >= 0) {
      top -= clientHeight
      left -= clientWidth
    } else if (itemAngle >= 90 && itemAngle < 180) {
      top -= clientHeight
    } else if (itemAngle >= 270 && itemAngle < 360) {
      left -= clientWidth
    }

    item.style.top = top + 'px'
    item.style.left = left + 'px'
    item.innerText = itemAngle
  })
}

https://www.cnblogs.com/sinosaurus/p/14159478.html