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

咱们在上文源码解析发现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中结点的初始位置是随机的，若是结点没有初始位置，则被放置在一个相似叶序图案上。

力导向仿真提供了一些方法来控制结点"过热"(根本停不下来那种),好比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）是一种数据结构，是一种每一个节点最多有四个子树的数据结构。

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

四叉树能够用来作什么

1. 用来在数据库中放置和定位文件（称做记录或键）

2. 2D空间碰撞校验

3. 地理空间划分经常使用于GIS查询

4. 图像处理

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

d3.v4里的force就是使用到四叉树的碰撞校验。该方法也常常被游戏领域使用到。

咱们来观察一下：每一个实体根据他在2D空间的位置而被放入这些子节点（正方形区域）中的一个里。任何不能正好在一个节点区域内的物体会被放在父节点。彻底处于一个子区域内的点是不会与另外一个区域的点碰撞的，这使得咱们在作碰撞校验或者获取相邻的节点时成倍的减小校验计算。

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

存储方法一：

那么全部实体只能与以本身为跟节点的树的全部节点上的实体才有可能发生碰撞。

存储方法二：

同理，实体只能与自身所在象限的其余实体发生碰撞（这里暂时先不考虑碰撞半径）。

d3-quadtree 的四叉树

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

中文地址：https://github.com/Leannechn/...

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

d3-quadtree采用的第二种存储方式，为了不浮点计算的精确度问题，最小区域单位为1
建立只有一个实体的四叉树

// 测试代码二
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

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

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

在理解了四叉树的存储以后，咱们在看d3-quadtree的API。是否一目了然了呢！
下文咱们来看看d3-quadtree的源码。

1.1