亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

d3-force 力導(dǎo)圖 源碼解讀與原理分析【二 ： 四叉樹(shù)（一）】

pepperwang / 2063人閱讀

摘要：我們?cè)谏衔脑创a解析發(fā)現(xiàn)版的節(jié)點(diǎn)碰撞采用四叉樹(shù)進(jìn)行了優(yōu)化。那么版本的力導(dǎo)圖具體和版的有何不同點(diǎn)呢，四叉樹(shù)又如何優(yōu)化碰撞校驗(yàn)的呢原文鏈接被重命名為。性能的提高歸功于的新的四叉樹(shù)。

我們?cè)谏衔脑创a解析發(fā)現(xiàn)v4版的節(jié)點(diǎn)碰撞采用四叉樹(shù)進(jìn)行了優(yōu)化。
那么V4版本的力導(dǎo)圖具體和v3版的有何不同點(diǎn)呢，四叉樹(shù)又如何優(yōu)化碰撞校驗(yàn)的呢？

v3-force VS v4-force 
https://github.com/xswei/D3-V... (原文鏈接)

d3.layout.force被重命名為d3.forceSimulation。新的力導(dǎo)向仿真使用速度Verlet算法而不是位置Verlet算法，即追蹤節(jié)點(diǎn)的位置(node.x，node.y)和速度(node.vx,node.vy)而不是之前的位置(node.px，node.py)。

現(xiàn)在的力導(dǎo)向仿真可以很好的擴(kuò)展：你可以指定哪些受力。這個(gè)方法使得作品更柔和。新的力導(dǎo)向也更靈活：可以為每個(gè)節(jié)點(diǎn)和連接設(shè)置參數(shù)。可以指定多帶帶的x和y來(lái)代替force.gravity。新的link force代替force.linkStrength并且更穩(wěn)定。新的many-body force代替原有的force.charge并且支持最小距離參數(shù)。性能的提高歸功于4.0的新的四叉樹(shù)。4.0提供了沖突解決和向中對(duì)齊的方法。

新的力導(dǎo)向仿真避免不確定性，比如在3.x中結(jié)點(diǎn)的初始位置是隨機(jī)的，如果結(jié)點(diǎn)沒(méi)有初始位置，則被放置在一個(gè)類似葉序圖案上。

力導(dǎo)向仿真提供了一些方法來(lái)控制結(jié)點(diǎn)"過(guò)熱"(根本停不下來(lái)那種),比如simulation.alphaMin和simulation.alphaDecay和內(nèi)部計(jì)時(shí)器。調(diào)用simulation.alpha時(shí)對(duì)內(nèi)部計(jì)時(shí)器沒(méi)有影響，它由simulation.stop和simulatonrestart獨(dú)立控制。與3.x一樣，4.0使用simulation.tick來(lái)打點(diǎn)。force.frition由simulation.velocityDecay代替。新的simulation.alphaTarget方法允許設(shè)置期望的仿真"溫度"(什么時(shí)候停下來(lái))。這樣可以使仿真重新開(kāi)始然后再次冷卻，提高了交互過(guò)程中的穩(wěn)定性。

force布局不再依賴拖拽行為，因?yàn)槟憧梢灾苯觿?chuàng)建一個(gè)可拖動(dòng)的力導(dǎo)向布局。設(shè)置node.fx和node.fy來(lái)修正節(jié)點(diǎn)的位置。simulation.find方法替代了泰森多邊形的SVG疊加，以找到最近節(jié)點(diǎn)的引用。

四叉樹(shù)是什么鬼 
四叉樹(shù)（quad-tree）是一種數(shù)據(jù)結(jié)構(gòu)，是一種每個(gè)節(jié)點(diǎn)最多有四個(gè)子樹(shù)的數(shù)據(jù)結(jié)構(gòu)。

四叉樹(shù)的定義是：它的每個(gè)節(jié)點(diǎn)下至多可以有四個(gè)子節(jié)點(diǎn)，通常把一部分二維空間細(xì)分為四個(gè)象限或區(qū)域并把該區(qū)域里的相關(guān)信息存入到四叉樹(shù)節(jié)點(diǎn)中。

四叉樹(shù)可以用來(lái)做什么

用來(lái)在數(shù)據(jù)庫(kù)中放置和定位文件（稱作記錄或鍵）

2D空間碰撞校驗(yàn)

地理空間劃分常用于GIS查詢

圖像處理

基于四叉樹(shù)2D空間碰撞校驗(yàn)

d3.v4里的force就是使用到四叉樹(shù)的碰撞校驗(yàn)。該方法也經(jīng)常被游戲領(lǐng)域使用到。

我們來(lái)觀察一下：每個(gè)實(shí)體根據(jù)他在2D空間的位置而被放入這些子節(jié)點(diǎn)（正方形區(qū)域）中的一個(gè)里。任何不能正好在一個(gè)節(jié)點(diǎn)區(qū)域內(nèi)的物體會(huì)被放在父節(jié)點(diǎn)。完全處于一個(gè)子區(qū)域內(nèi)的點(diǎn)是不會(huì)與另一個(gè)區(qū)域的點(diǎn)碰撞的，這使得我們?cè)谧雠鲎残ｒ?yàn)或者獲取相鄰的節(jié)點(diǎn)時(shí)成倍的減少校驗(yàn)計(jì)算。

以上圖為例，存儲(chǔ)方式有多種。存儲(chǔ)的最大差異在意當(dāng)實(shí)體坐標(biāo)位于區(qū)域邊上的時(shí)候，該實(shí)體應(yīng)存儲(chǔ)在哪個(gè)位置。

存儲(chǔ)方法一：


那么所有實(shí)體只能與以自己為跟節(jié)點(diǎn)的樹(shù)的所有節(jié)點(diǎn)上的實(shí)體才有可能發(fā)生碰撞。

存儲(chǔ)方法二：


同理，實(shí)體只能與自身所在象限的其他實(shí)體發(fā)生碰撞（這里暫時(shí)先不考慮碰撞半徑）。

d3-quadtree 的四叉樹(shù)

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

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

代碼試運(yùn)行地址：https://runkit.com/npm/d3-qua...

d3-quadtree采用的第二種存儲(chǔ)方式，為了避免浮點(diǎn)計(jì)算的精確度問(wèn)題，最小區(qū)域單位為1
創(chuàng)建只有一個(gè)實(shí)體的四叉樹(shù)

// 測(cè)試代碼二
var d3Quadtree = require("d3-quadtree")
var data = [[1.1,1.2]];
var tree = d3Quadtree.quadtree().addAll(data);
這里我們要說(shuō)明幾個(gè)變量和函數(shù)名的含義
Quadtree.extend() // [[x0,y0],[x1,y1]]四叉樹(shù)的邊界，即矩形的左上頂點(diǎn)的坐標(biāo)，與右下頂點(diǎn)坐標(biāo)
Quadtree.x0 // 正方形區(qū)域左上頂點(diǎn)坐標(biāo)x
Quadtree.y0 // 正方形區(qū)域左上頂點(diǎn)坐標(biāo)y
Quadtree.x1 // 正方形區(qū)域右下頂點(diǎn)坐標(biāo)x
Quadtree.y1 // 正方形區(qū)域右下頂點(diǎn)坐標(biāo)y

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

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

在理解了四叉樹(shù)的存儲(chǔ)之后，我們?cè)诳磀3-quadtree的API。是否一目了然了呢！
下文我們來(lái)看看d3-quadtree的源碼。

1.1

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/82325.html

相關(guān)文章

  • d3-force 力導(dǎo)圖 源碼解讀與原理分析【一】

    摘要：設(shè)置力導(dǎo)圖點(diǎn)陣中心碰撞其他引用模塊構(gòu)造常量函數(shù)微小晃動(dòng)隨機(jī)數(shù)四叉樹(shù)模塊設(shè)置力導(dǎo)圖點(diǎn)陣中心此處代碼使用的是單例對(duì)象模式，讀者要注意，切勿與類對(duì)象理解混了。 首先先推薦一下某呆翻譯的d3-force的中文文檔：https://github.com/xswei/D3-V... 。 在我們解讀源碼前還請(qǐng)讀者先熟悉一下force相關(guān)的API,以及es6語(yǔ)法 . 如有分析不當(dāng)之處還請(qǐng)留言指出，謝謝...

    luckyyulin 評(píng)論0 收藏0

  • 高仿 ios 相冊(cè)地圖功能

    摘要：本篇文章已授權(quán)微信公眾號(hào)郭霖獨(dú)家發(fā)布老規(guī)矩先上圖最近沒(méi)有什么時(shí)間，后面項(xiàng)目再補(bǔ)上詳細(xì)說(shuō)明百度地圖新增點(diǎn)聚合功能。百度地圖是把整個(gè)地球是按照一個(gè)平面來(lái)展開(kāi)，并且通過(guò)墨卡托投影投射到坐標(biāo)軸上面。上圖很明顯墨卡托投影把整張世界地圖投影成。 本篇文章已授權(quán)微信公眾號(hào) guolin_blog （郭霖）獨(dú)家發(fā)布 老規(guī)矩先上圖最近 沒(méi)有什么時(shí)間，后面項(xiàng)目再補(bǔ)上詳細(xì)說(shuō)明 showImg(https:/...

    pakolagij 評(píng)論0 收藏0

  • 數(shù)據(jù)結(jié)構(gòu)與算法--四叉樹(shù)（javascript實(shí)現(xiàn)）

    摘要：最近想要研究研究地形的渲染，然后就想起了四叉樹(shù)，在網(wǎng)上看了一篇相關(guān)的文章，準(zhǔn)備拿實(shí)現(xiàn)一下備用。四叉樹(shù)的定義是它的每個(gè)節(jié)點(diǎn)下至多可以有四個(gè)子節(jié)點(diǎn)，通常把一部分二維空間細(xì)分為四個(gè)象限或區(qū)域并把該區(qū)域里的相關(guān)信息存入到四叉樹(shù)節(jié)點(diǎn)中。 最近想要研究研究webgl地形的渲染，然后就想起了四叉樹(shù)，在網(wǎng)上看了一篇相關(guān)的文章，準(zhǔn)備拿javascript實(shí)現(xiàn)一下備用。 四叉樹(shù)原理 （這部分就直...

    xbynet 評(píng)論0 收藏0

  • Java TreeMap 源碼解析

    摘要：源碼剖析由于紅黑樹(shù)的操作我這里不說(shuō)了，所以這里基本上也就沒(méi)什么源碼可以講了，因?yàn)檫@里面重要的算法都是，這里的是指，他們是算法導(dǎo)論的作者，也就是說(shuō)里面算法都是參照算法導(dǎo)論的偽代碼。因?yàn)榧t黑樹(shù)是平衡的二叉搜索樹(shù)，所以其包含操作的時(shí)間復(fù)雜度都為。 本文章首發(fā)于個(gè)人博客，鑒于sf博客樣式具有賞心悅目的美感，遂發(fā)表于此，供大家學(xué)習(xí)、批評(píng)。本文還在不斷更新中，最新版可移至個(gè)人博客。? 繼上篇文章...

    rubyshen 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<