d3-force 力导图 源码解读与道理剖析【二 ： 四叉树（一）】

2019年8月31日 587次阅读 来源: 安安

我们在上文源码剖析发明v4版的节点碰撞采纳四叉树进行了优化。
那末V4版本的力导图详细和v3版的有何不同点呢，四叉树又怎样优化碰撞校验的呢？

v3-force VS v4-force

https://github.com/xswei/D3-V… (原文链接)

d3.layout.force被重命名为d3.forceSimulation。新的力导向仿真运用速率Verlet算法而不是位置Verlet算法，即追踪节点的位置(node.x，node.y)和速率(node.vx,node.vy)而不是之前的位置(node.px，node.py)。

如今的力导向仿真能够很好的扩大：你能够指定哪些受力。这个要领使得作品更温和。新的力导向也更天真：能够为每一个节点和衔接设置参数。能够指定零丁的x和y来替换force.gravity。新的link force替换force.linkStrength而且更稳固。新的many-body force替换原有的force.charge而且支撑最小间隔参数。机能的进步归功于4.0的新的四叉树。4.0供应了争执处置惩罚和向中对齐的要领。

新的力导向仿真防止不确定性，比方在3.x中结点的初始位置是随机的，假如结点没有初始位置，则被安排在一个相似恭弘=叶 恭弘序图案上。
《d3-force 力导图 源码解读与道理剖析【二 ： 四叉树（一）】》
力导向仿真供应了一些要领来掌握结点”过热”(基础停不下来那种),比方simulation.alphaMin和simulation.alphaDecay和内部计时器。挪用simulation.alpha时对内部计时器没有影响，它由simulation.stop和simulatonrestart自力掌握。与3.x一样，4.0运用simulation.tick来办理。force.frition由simulation.velocityDecay替换。新的simulation.alphaTarget要领许可设置希冀的仿真”温度”(什么时刻停下来)。如许能够使仿真重新开始然后再次冷却，进步了交互过程当中的稳固性。

force规划不再依靠拖拽行动，由于你能够直接建立一个可拖动的力导向规划。设置node.fx和node.fy来修改节点的位置。simulation.find要领替换了泰森多边形的SVG叠加，以找到近来节点的援用。

四叉树是什么鬼

四叉树（quad-tree）是一种数据结构，是一种每一个节点最多有四个子树的数据结构。

《d3-force 力导图 源码解读与道理剖析【二 ： 四叉树（一）】》

四叉树的定义是：它的每一个节点下最多能够有四个子节点，一般把一部分二维空间细分为四个象限或地区并把该地区里的相干信息存入到四叉树节点中。

四叉树能够用来做什么

  1. 用来在数据库中安排和定位文件（称作纪录或键）

  2. 2D空间碰撞校验

  3. 地舆空间分别常用于GIS查询

  4. 图象处置惩罚

基于四叉树2D空间碰撞校验

d3.v4里的force就是运用到四叉树的碰撞校验。该要领也经常被游戏范畴运用到。

我们来视察一下：每一个实体依据他在2D空间的位置而被放入这些子节点（正方形地区）中的一个里。任何不能正好在一个节点地区内的物体会被放在父节点。完整处于一个子地区内的点是不会与另一个地区的点碰撞的，这使得我们在做碰撞校验或许猎取相邻的节点时成倍的削减校验盘算。

《d3-force 力导图 源码解读与道理剖析【二 ： 四叉树（一）】》

以上图为例，存储体式格局有多种。存储的最大差别在乎当实体坐标位于地区边上的时刻，该实体应存储在哪个位置。

存储要领一：

《d3-force 力导图 源码解读与道理剖析【二 ： 四叉树（一）】》
那末一切实体只能与以本身为跟节点的树的一切节点上的实体才有可能发作碰撞。

存储要领二：

《d3-force 力导图 源码解读与道理剖析【二 ： 四叉树（一）】》
《d3-force 力导图 源码解读与道理剖析【二 ： 四叉树（一）】》

同理，实体只能与本身地点象限的其他实体发作碰撞（这里临时先不斟酌碰撞半径）。

d3-quadtree 的四叉树

API地点：https://github.com/d3/d3-quad…

中文地点：https://github.com/Leannechn/…

代码试运行地点：https://runkit.com/npm/d3-qua…

d3-quadtree采纳的第二种存储体式格局，为了防止浮点盘算的精确度题目，最小地区单元为1
建立只要一个实体的四叉树
《d3-force 力导图 源码解读与道理剖析【二 ： 四叉树（一）】》

// 测试代码二
var d3Quadtree = require("d3-quadtree")
var data = [[1.1,1.2]];
var tree = d3Quadtree.quadtree().addAll(data);

这里我们要申明几个变量和函数名的寄义

Quadtree.extend() // [[x0,y0],[x1,y1]]四叉树的边境，即矩形的左上极点的坐标，与右下极点坐标
Quadtree.x0 // 正方形地区左上极点坐标x
Quadtree.y0 // 正方形地区左上极点坐标y
Quadtree.x1 // 正方形地区右下极点坐标x
Quadtree.y1 // 正方形地区右下极点坐标y

《d3-force 力导图 源码解读与道理剖析【二 ： 四叉树（一）】》

                                        root
                             /                  \
         第一象限：_root[0]                      第三象限：_root[2]==> [2,6]
         /                   \
        /                     \

第一象限：_root0–>[1.1,1.2] 第二象限：_root0–>[3,1]

在理解了四叉树的存储以后，我们在看d3-quadtree的API。是不是一览无余了呢！
下文我们来看看d3-quadtree的源码。

1.1

    原文作者：安安
    原文地址: https://segmentfault.com/a/1190000008914772
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞