• 【 D3.js 进阶系列 — 2.2 】 力学图的參数


    力学图的布局中有非常多參数。本文将逐个说明。

    D3 中的力学图布局是使用韦尔莱积分法计算的。这是一种用于求解牛顿运动方程的数值方法,被广泛应用于分子动力学模拟以及视频游戏中。

    定义布局的代码例如以下:

    var force = d3.layout.force()

    就可以。D3 中提供了 17 个函数用于设定其參数和事件。在全部布局中是最多的,以下将对其进行说明。


    size()

    用于设定力学图的作用范围。用法为 force.size( [ x , y ] ),这个函数用于指定两件事:

    • 重力的重心位置为 ( x/2 , y/2 )
    • 全部节点的初始位置限定为 [ 0 , x ] 和 [ 0 , y ] 之间(但并不是之后也是如此)

    假设不指定,默觉得 [ 1 , 1 ] 。


    linkDistance()

    指定结点连接线的距离,默觉得20。假设距离是一个常数。那么各连接线的长度总是固定的;假设是一个函数。那么这个函数是作用于各连接线( source , target )的。


    linkStrength()

    指定连接线的坚硬度。值的范围为[ 0 , 1 ]。值越大越坚硬。

    其直观感受是:

    • 值为1。则拖动一个顶点A。与之相连的顶点会与A保持linkDistance设定的距离运动
    • 值为0,则拖动一个顶点A,与之相连的顶点不会运动。连接线会被拉长

    friction()

    定义摩擦系数的函数。值的范围为[ 0 , 1 ]。默觉得0.9。可是这个值事实上并不是物理意义上的摩擦,事实上其意义更接近速度随时间产生的损耗,这个损耗是针对每个顶点的。

    • 值为1,则没有速度的损耗。
    • 值为0。则速度的损耗最大。


    charge()

    设定引力,是排斥还是吸引,默认值为-30。

    • 值为+,则相互吸引。绝对值越大吸引力越大。
    • 值为-。则互斥,绝对值越大排斥力越大。


    chargeDistance()

    设定引力的作用距离,超过这个距离,则没有引力的作用。

    默认值为无穷大。


    gravity()

    以 size 函数设定的中心产生重力,各顶点都会向中心运动。默认值为0.1。也能够设定为0。则没有重力的作用。


    theta()

    顶点数假设过多,计算的时间就会加大(O(n log n))。theta 就是为了限制这个计算而存在的。默认值为0.8。这个值越小,就能把计算限制得越紧。


    alpha()

    设定动画运动的时间,超过时间后运动就会停止。

    事实上

    • force.start() 即 alpha(0.1)
    • force.stop() 即 alpha(0)

    谢谢阅读。


    文档信息

  • 相关阅读:
    Math类的用法
    c#中和java中可变参数对比
    c#中泛型集合directory和java中map集合对比
    C#调用短信接口(通过简单的工厂模式整合多个短信平台)
    C#用网易邮箱发送邮件(同步异步)
    新浪云-PHP实现上传原图,缩略图
    PHP 继承,组合,单模式,GUID,等混合实例
    ASP.Net MVC @Html类
    ASP.net MVC 无法初始化 ASP.NET Simple Membership 数据库
    PHP 单列模式实例讲解以及参考网址
  • 原文地址:https://www.cnblogs.com/jhcelue/p/6907330.html
Copyright © 2020-2023  润新知