天天看點

【D3.js 學習總結】17、D3布局-分區圖(矩形)d3.layout.partition()

【D3.js 學習總結】17、D3布局-分區圖(矩形)d3.layout.partition()

分區圖可以展示為方形或者圓形,從原理上來說它是樹狀結構的一種可視化展現形式,表示包含與被包含的關系;

partition.children - 取得或設定孩子通路器。

partition.links - 計算樹節點中的父子連結。

partition.nodes - 計算分區布局并傳回節點數組。

partition.size - 指定布局的尺寸。

partition.sort - 控制兄弟節點的周遊順序。

partition.value - 取得或設定用來指定圓尺寸的值通路器。

partition - partition.nodes的别名。

轉換資料後,節點數組的輸出結果如圖所示。

【D3.js 學習總結】17、D3布局-分區圖(矩形)d3.layout.partition()

其中,節點對象的屬性包括:

x: 頂點的 x 坐标位置

y: 頂點的 y 坐标位置

dx: 頂點的寬度 dx

dy: 頂點的高度 dy

本例中将不會用到liks資料對象;

<a href="http://gafish.github.com/demo/d3/partition1.html">檢視線上示範</a>

繼續閱讀