d3.layout.pack 釋義

 d3.layout.pack -API釋義

pack部分官方API :https://github.com/mbostock/d3/wiki/Pack-Layout。

下圖採用嵌套結構來呈現出層級結構。每個葉子節點的尺寸都是由該節點的數據量化而來。如圖，大圈套小圈，經過小圈的數量累積造成了大圈的尺寸，畢竟是由數值計算而來，在這個計算過程當中。不免有小數產生的精度問題，因此圈與圈之間有些失真，但無傷大雅，由於葉子節點不是經過累積計算出的尺寸，因此對「我」（葉子節點）又有什麼影響呢？相對treemap而言，儘管pack貌似浪費了空間（圈間間隙），可是結構上的分層卻更加的顯著，你以爲呢？

 

你不說我浪費空間嗎？OK!我節省下空間，經過壓縮，pack將盡量的計算出有效利用面積。不過，你不以爲變味了嗎？看起來有點像bubble charts。

 

和D3中其餘類類似，layout中的各類佈局（如Pie、Force、Hierarchy等）都支持方法鏈式調用。下面將對你可能調用的方法作個介紹。Follow me!

#d3.laoout.pack()

建立pack佈局，佈局中節點默認按照升序排列，子節點和其葉子節點都經過對象表示，就比如子節點是一個電影院，其葉子節點爲電影院裏的觀衆，觀衆座位號碼按升序排列。

#pack(root)

#pack.nodes(root)

使用pack佈局，返回根節點直接子節點（僅與根節點相關聯），集羣佈局當屬分層佈局的一部分。這些佈局大同小異，都是從根節點切入，而後找出子節點以及葉子節點，每個節點都是個對象，是對象就有屬性，這些屬性也就決定了節點的性質。如下就是你可能用到的幾個屬性。

• parent – 根節點嘍，要麼爲null，要麼爲根節點。
• children – 子節點。（多是個集合）。
• value –節點value屬性，可保存你以爲有意義的值(例如能夠放個對排序有意義的值)。
• depth – 層次深度（你應該瞭解SVG繪圖層次關係）。
• x – 節點橫座標。
• y – 節點縱座標（舒適提示：y值的計算通用h-y，你懂得）。
• r – 節點半徑。

#pack.links(nodes)

它表示一種關係，好比nodes爲root，它就返回root的直接子節點，直接子節點擁有兩個屬性：

• source – 誰是它的父節點
• target –誰是他的子節點

這種承上啓下的銜接，用於點到點畫線再好不過了，畫個斜線試試。

 

相似這種效果：

 

#pack.children([children])

這裏容許你望文生義，它就是獲取子節點。傳來節點，返回它的子節點，只不過這個方法很執着，它會不斷的返回子節點的子節點，知道找到葉子節點才罷休。例以下面這段信息：

 

若是你傳的是flare節點，那麼返回的就是一個數組套數組（子節點集合以及子子節點集合），這種方法對json數據的解析很是便利。上面不就是段json數據嗎？

#pack.sort([comparator])

同級關係節點排序（也就是兄弟節點），父節點調用sort後，能夠自定義比較器，按照咱們的意願來對直接子節點進行排序，也能夠不定義比較器，d3默認經過獲取節點的value值進行升序排列。

 

#pack.value([value])

每一個節點都有個value，但跟這個value不是一個含義，能夠理解爲這個value是每一個節點的子節點value的集合，官方文檔爲了語言的嚴謹性，說了一大堆東西繞來繞去，無非就是要告訴你，你所見到的圈的大小，就是從這計算出來的。D3的強大之處在於，你僅經過葉子節點的一個字段來詮釋大小標識，它就能夠把節點的子節點進行累加計算出節點的最適面積大小。

#pack.size([size])

你的pack佈局範圍在這裏設置，也就是使用pack做圖佔用的面積。

#pack.radius([radius])

指定畫圈葉子節點半徑，這樣指定以後，葉子節點面積大小的計算，將再也不由value計算得來。

#pack.padding([padding])

相鄰節點（同級）間的距離，默認爲0。

 

原創做品，轉載請註明出處！謝謝！