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