d3力导向图增加节点_D3力导向图

2017年5月8日

一、背景

力导向图非常适合于渲染关系型信息图。

二、什么是力导向图(Force-directed)?

我们可以把整张 Network 想象成一个物理仿真系统(Simulation)。系统中的每个节点(Node)都是一个带有能量的粒子,粒子与粒子之间存在斥力(如模拟库伦斥力),而被边(Link)所连结的粒子受到牵引力(如模拟胡克弹力)。系统中的粒子在斥力和引力的不断作用下,从随机无序的布局(Layout)不断发生位移,逐渐趋于平衡有序的布局。同时整个仿真系统的能量也在不断消耗,经过数次迭代后,粒子之间不再发生相对位移,整个系统达到最终稳定平衡的状态。

d11f0d2719ad

此动效实现的本质就是每一帧都重新渲染图中节点的位置(x,y), 节点的位置(x,y)是由节点上一帧所处的位置(x,y)+速度(vx,vy)所决定的。而速度就是通过力学模型所计算出来的。

关键在于力(Forces),D3.js 中内置了几种经典的力模型:

1. 中心力(Centering)

中心力可以使得节点最终布局是围绕着某个中心的。相当于某个中心点对所有的节点都有一个制约,不会让布局的中心偏离。

2. 碰撞力(Collision)

d11f0d2719ad

碰撞力为每个节点都设定一个圆形的碰撞区域,从而防止节点之间重叠。

关键参数:radius 碰撞半径

3. 牵引力(Links)

d11f0d2719ad

牵引力的强度与节点之间的距离成正比,类似于弹簧力。

关键参数:distance。影响两个节点之间的最终距离。

4. N 体力(Many-Body)

N体问题是天体力学的一种力学模型,它研究 N 个质点相互之间在万有引力作用下的运动规律。

Many-Body 力是作用于所有节点之间的,是全局的,任何两个节点之间都将受到此力的影响。(与 牵引力 Links 不同,Links 力仅仅会影响有连接关系的两个节点)

它可以用来模拟引力(吸引力),只需设置的 strength 参数为正数;

它也可用来模拟电荷力(排斥力),只需设置的 strength 参数为负数。

实现算法使用了 the Barnes–Hut approximation(通过将平面不断递归地划分成四个小区域来构建一棵四叉树) 来提高性能;

5. 方向力(Positioning)

方向力分为 X 方向和 Y 方向,即将作用力限制在一个维度上( X 维度或者 Y 维度)

说明

以上这几个力学模型是 D3.js 封装的几个经典力学模型,开发者也可根据自身的业务场景,应用自定义的力模型;

力模型是可以多重复叠加的,即可同时叠加中心力、碰撞力、牵引力等等;

三、最终效果

d11f0d2719ad

通过控制右侧面板,所见即所得地为 Chart 添加不同的力,用户可灵活定制想要的效果。

d11f0d2719ad

四、相关资料

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值