Force-directed Layout(力导图布局)

力导图

前言

本文基于传送门,算是对大佬文章的一个粗劣翻译和个人理解.
还是更建议去看大佬的原文,写得很好.

Intro

  • 给定一个社交网络的例子.

    In the case of network visualization, we compute the layout using a similar physical simulation: nodes in the network act as charged particles that repel each other, while links act as springs that pull related nodes together.

    也就是,我们认为,在社交网络中,节点之间的相互作用是相当于带电粒子之间的相互斥力,而节点之间的连线是相当于弹簧的拉力,将两个节点聚拢引力.

  • 带来的缺点

    用这种方法需要计算任意两个点之间的相互作用力,花费时间更多.达到O(n2)级别.这样每次增加一个点,都需要进行大量的冗余计算.(因为存在一些点距离新添加点的距离非常相近,计算结果大致相同)

Barnes-Hut Approximation(BH近似)

  • 具体想法是通过将一组远距离点看作一组,以其质心到给定点的力去近似这一组点的作用力.

    此方案将计算的时间复杂度由O(n2)提高到了O(n logn).

    The key idea is to approximate long-range forces by replacing a group of distant points with their center of mass.

    这种近似的核心是一个空间索引,将一组点抽象成一个单一的质点.在二维空间,使用四叉树去将二维空间递归分割,对应到三维空间,就是使用八叉树将空间递归分割.(想象三维坐标系中的三个坐标平面将整个空间八等分).

  • 步骤(二维空间为例)

    1. 通过四叉树,构建空间索引
    2. 计算质心
    3. 模拟力
  • 接下来进行具体分析,具体链接参见The Barnes-Hut Approximation (jheer.github.io)

    构建四叉树

    构建四叉树具体参见上述链接中的其中Step1,拖动bar进行动态化演视

    总而言之可以分为如下的部分:

    • 初始给定一个点,确定该点所在的位置(一定位于最开始的四大块之一)
    • 后续给定点,判断其是否在当前已经划分好的方格内且自己独占一格不与其他点公用一格,如果不是,继续向下划分,直到这个新给定的点独自在一个方格内.
    • 到最后,每个点都有独属于自己的小方格.小方格的大小代表该点在四叉树中的层数.小方格越小,层数越深.

    计算质心

    一个单元格的质心,是它的四个子单元格质心的加权平均.

    进行计算时,选择从最底层的叶子节点逐级向上进行遍历.

    当遍历结束,每个单元格都有了其自己的质心位置和大小(权重信息).

    模拟N体力

    具体参见链接

    Rather than compute interactions among individual points, we can compute interactions with centers of mass, using smaller quadtree cells for nearer points and larger cells for more distant points.

    At this point we’ve skipped a critical detail: what constitutes “long-range” versus “short-range” forces? We consider both the distance to the center of a quadtree cell and that cell’s width. If the ratio width / distance falls below a chosen threshold (a parameter named theta), we treat the quadtree cell as a source of **long-range **forces and use its center of mass. Otherwise, we will recursively visit the child cells in the quadtree.

    相较于计算个体之间的作用力,这里我们更倾向于通过质心进行计算.

    对于要进行计算的质心选择:例如给定一个任意点A,我们依次从最高层到下层去遍历单元格中心到给定点A的距离.将当前遍历到的单元格长度width与这个单元格中心到A的距离distance相除.

    • 如果小于一个给定参数theta,我们认为distance更大,因此要使用该单元格的质心去近似.并且不再对该单元进行更深层的子单元格递归判断.
    • 如果大于一个给定参数theta,认为distance较小,因此要继续向下,判断该单元格的子单元格.判断方式同上.直到到达一个点.

    判断远近的条件是通过判断 被遍历单元格中心/单元格到给定点的距离,当距离越近,这个值越大,就越容易被认为是相近点,越要向下细分.

表现分析

从运行时间和力模拟的精确度两个方向进行分析.

  • 运行时间

    • 数据集大小:500-10000.

    • 更改参数:theta

    • 每组数据集中测试次数:50次
      请添加图片描述

    • 结论

      确实可以提高速度.并且随着参数theta增大,运行速度增快.

      初始的方法其实可以看做是theta=inf的特殊情况.这样每个点都要精确到本身而不是单元格.

  • 近似误差

    • 纵坐标代表初始算法结果与BH近似的结果之间的像素点位置差异值
      请添加图片描述

    • 结论

      上述给出的是平均误差,虽然最大之后5%左右,但具体到某个点上,误差可能很大.因此还应关注最大误差值.

      相对而言,theta=1的效果最好.(默认值)

      These results suggest that a good default value for theta — with low running time and low approximation error — is around 1.0. Indeed

结论

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用Force-Directed Layout(力导向布局)在echarts中呈现图表,你需要做以下步骤: 1. 引入必要的echarts库和组件。确保你已经正确引入了echarts库和相应的组件。例如,在HTML文件中添加以下script标签: ```html <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts-gl@1.1.1/dist/echarts-gl.min.js"></script> ``` 2. 创建一个具有合适配置的echarts实例。在JavaScript中,使用`echarts.init`方法创建一个容器,并传入相关的配置项: ```javascript var myChart = echarts.init(document.getElementById('chart-container')); var option = { // 配置项... }; myChart.setOption(option); ``` 3. 配置图表的系列类型为'graph',并设置相应的系列选项。在option对象中,添加一个graph系列,并配置相关选项: ```javascript var option = { series: [{ type: 'graph', layout: 'force', // 设置布局为force // 其他系列选项... }], // 其他配置项... }; ``` 4. 配置力导向布局的相关参数。在graph系列选项中,你可以根据需求设置力导向布局的参数,例如节点之间的斥力、节点与边之间的吸引力、布局的迭代次数等等: ```javascript var option = { series: [{ type: 'graph', layout: 'force', force: { repulsion: 100, // 节点之间的斥力 edgeLength: 150, // 边的默认长度 // 其他布局参数... }, // 其他系列选项... }], // 其他配置项... }; ``` 5. 设置节点和边的数据。根据你的数据,设置节点和边的相关信息,例如节点的名称、坐标、边的关系等等。 6. 渲染图表。最后,使用`setOption`方法将配置应用到图表中,并渲染出力导向布局的图表: ```javascript myChart.setOption(option); ``` 以上是一个基本的使用Force-Directed Layout(力导向布局)的示例。你可以根据你的需求和数据进行相应的配置和定制。 希望能对你有所帮助!如果还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值