d3 bubble原始碼分析

2022-02-15 22:03:42 字數 1545 閱讀 9977

d3、d3.pack、d3.hierarchy

關於怎麼使用,**中有關鍵注釋。

這是一種典型的樹形結構,每個節點包含樹的深度和高度,還有「父親指標」,「兒子指標」。

1

var index$2 = function

() else

19return

root;20}

2122 pack.radius = function

(x) ;

2526 pack.size = function

(x) ;

2930 pack.padding = function

(x) ;

3334

return

pack;

35};

3637

function

radiusleaf(radius)

42};43}

4445

function

packchildren(padding, k)

59};60}

6162

function

translatechild(k)

70};

71 }

主要邏輯在l10-l12.

root.eachbefore(radiusleaf(radius))函式 比較簡單,前序遍歷,對每個節點的半徑進行設定。其中radius是**函式,引數是node.

root.eachafter(packchildren(padding, 0.5)) //後序遍歷,在packenclose函式中設定每個children相對於此節點的位置,並返回此節點的半徑大小。這句話完成了半徑的設定和節點相對于父節點的相對位置。

root.eachbefore(translatechild(1)); //由於第二步的位置偏移只是相對于父節點的,這裡,遞迴的把children的偏移加上其父親節點的偏移。

注意l15行功能是否多餘:

本來packenclose生成的布局是圓形相切布局(圓緊挨著圓,可能不太好看),如何在圓之間加一些空隙,這裡作者用了乙個小技巧:把計算之前的圓增大一點,經過packenclose布局後,再把圓的半徑給恢復。注:原資料中除葉子節點外都沒有半徑資訊的,如果沒有l15的**的話,冒然增加乙個padding,是無效果的,最後的結果是相切布局。l15的結果是把所有節點的半徑都設定一下(相切布局)。

其中packchildren中的packenclose函式是布局的核心**。此部分**未使用碰撞的思想(需要迭代,速度就更慢了),直接進行幾何的相切布局。

使用方式:

返回結果: 外圓的半徑。注意原資料a中每個元素多了一些座標資訊。意思就是,給一組點的大小,經過這個函式後,會得出一些布局資訊。

uboot原始碼分析(3)

正式開始了第二階段 relocate部分的 負責把u boot stage2的 從flash儲存器載入到記憶體,如下 163 ifndef config skip relocate uboot 164relocate 165 adr r0,start 獲取當前 存放位址 00000000 166 l...

android adb原始碼分析 3

本篇分析fdevent.c的源 這個源 檔案的工作時建立 監聽和處理讀寫事件。static fdevent fd table 0 static int fd table max 0 fd table儲存的是以fdevent fd為索引儲存的fdevent指標,即 the fdevent的值等於fd ...

Typecho 原始碼分析(3)

通過之前我們的分析,我們已經把安裝流程搞定可,本篇開始,我們分析前台相關的流程。我們又一次回到了index.php在第一篇說完前幾行判斷是否安裝之後,我們就暫時離開了這個檔案,當我們安裝完以後,進入首頁就又回到了這裡,我們跳過判斷安裝那一塊,直接看後面。初始化元件 typecho widget wi...