d3布局


d3的布局,實際上是一個轉換函數,將 原始數據 轉換為 該布局需要的數據。

並不能直接通過布局生成圖形,仍然需要自己根據數據去添加圖形。

1.常用布局有12種

直方圖(Histogram)
餅狀圖(Pie)
力導向圖(Force)
弦圖(Chord)
捆圖(Bundle)
堆棧圖(Stack)

層級圖(Hierarchy)

--集群圖(Cluster)
--打包圖(Pack)
--分區圖(Partition)
--樹狀圖(Tree)
--矩陣樹圖(Treemap)

這 12 個布局中,層級圖(Hierarchy)不能直接使用,但它衍生擴展而來的集群圖、打包圖、分區圖、樹狀圖、矩陣樹圖卻是可以直接用於商業化。

2. 各種布局的方法

2.1 直方圖(Histogram)

d3.layout.histogram - 構建一個默認直方圖(用來表示一組離散數字的分布,橫軸表示區間,縱軸表示區間內樣本數量或樣本百分比).

histogram.value - 獲取或設置值訪問器.
histogram.range - 獲取或設置合法值范圍.
histogram.bins - 指定如何將數據分組到不同的區間(bin)里, 返回一個構造函數
histogram - 根據已設置的區間將數據分組,返回已分組的二維數組).
histogram.frequency - 設置直方圖Y軸值是區間內數據的總量還是百分比


2.2 餅圖(pie)

d3.layout.pie - 構建一個默認的餅圖.

pie - 該函數將傳入的原始參數轉換成可用於餅圖或者環形圖的數據結構.
pie.value - 獲取或設置值訪問器.
pie.sort - 設置餅圖順時針方向的排序方法.
pie.startAngle - 設置或獲取整個餅圖的起始角度.
pie.endAngle - 設置或獲取整個餅圖的終止角度.


2.3 力學(Force)

d3.layout.force -節點(node)基於物理模擬的位置連接。

force.on - 監聽布局位置的變化。(僅支持"start","step","end"三種事件)
force.nodes - 獲得或設置布局中的節點(node)陣列組。
force.links - 獲得或設置布局中節點間的連接(Link)陣列組。.
force.size - 獲取或設置布局的 *寬* 和 *高* 的大小.
force.linkDistance - 獲取或設置節點間的連接線距離.
force.linkStrength - 獲取或設置節點間的連接強度.
force.friction - 獲取或設置摩擦系數.
force.charge - 獲取或設置節點的電荷數.(電荷數決定結點是互相排斥還是吸引)
force.gravity - 獲取或設置節點的引力強度.
force.theta - 獲取或設置電荷間互相作用的強度.
force.start - 開啟或恢復結點間的位置影響.
force.resume - 設置冷卻系數為0.1,並重新調用start()函數.
force.stop - 立刻終止結點間的位置影響.(等同於將*冷卻系數*設置為0)
force.alpha - 獲取或設置布局的冷卻系數.(冷卻系數為0時,節點間不再互相影響)
force.tick - 讓布局運行到下一步.
force.drag - 獲取當前布局的拖拽對象實例以便進一步綁定處理函數.

2.4 弦圖(Chord)

d3.layout.chord - 初始化一個弦圖對象, 返回一個 Chord 實例

chord.matrix - 設置或者獲取弦圖實例對應的矩陣數據
chord.padding - 設置或獲取弦圖各段圓弧之間的間隔角度
chord.sortGroups - 設置或獲取矩陣分組的排序函數
chord.sortSubgroups - 設置或獲取矩陣二級分組的排序函數
chord.sortChords - 設置或獲取弦圖在z序上的排序函數(決定哪一組顯示在最上層)
chord.chords - 該函數會將參數處理成對 chord 更友好的格式並返回, 若沒有提供參數, 會調用matrix()來獲取數據
chord.groups - 該函數參數處理成更易於理解的分組信息, 若沒有提供參數, 會調用matrix()來獲取數據

2.5 捆圖(Bundle)

d3.layout.bundle - 構造一個新的捆圖布局

bundle - 應用霍頓的邊緣捆綁算法

2.6 堆棧圖(Stack)

d3.layout.stack - 構建一個默認的堆疊圖(用來展示一系列x軸相同的面積圖或者立方圖).

stack - 計算每一層的基線.
stack.values - 設置或者獲取每層的值訪問器.
stack.order - 設置每層的排序.
stack.offset - 指定總的基線算法.
stack.x - 設置或獲取每層的x軸訪問器.
stack.y - 設置或獲取每層的y軸訪問器.
stack.out - 設置或獲取用來儲存基線的輸出函數.

2.7 層級布局(Hierarchy)

d3.layout.hierarchy - 獲得一個自定義的層級布局的實現.

hierarchy.sort - 獲取或設置一個函數, 用來給兄弟節點(同一父結點的子結點)的排序.
hierarchy.children - 獲取或設置子結點的訪問器.
hierarchy.nodes - 計算並返回指定結點的子結點信息.
hierarchy.links - 指定一個子結點數組(通常是**nodes**函數返回值), 計算它們與父結點的連接信息.
hierarchy.value - 獲取或設置結點的**值**訪問器.
hierarchy.revalue - 重新計算層級布局.

2.8 樹(Tree)

d3.layout.tree - position a tree of nodes tidily.

tree.sort - 設置或獲取一個函數, 用來給兄弟節點(同一父結點的子結點)排序.
tree.children - 設置或獲取子結點的訪問器.
tree.nodes - 計算並返回指定結點的子結點信息.
tree.links - 指定一個子結點數組(通常是**nodes**函數返回值), 計算它們與父結點的連接信息.
tree.separation - 設置或獲取相隔結點之間的間隔計算函數.
tree.size - 指定整個布局的寬和高.
tree.nodeSize - 給全部結點指定一個固定的大小(會導致`tree.size`失效)

2.9 集群(Cluster)

d3.layout.cluster - 用默認設置生成一個集群布局對象.

cluster.sort - 獲取或設置一個函數, 用來給兄弟節點(同一父結點的子結點)的排序.
cluster.children - 獲取或設置子結點的訪問器.
cluster.nodes - 計算並返回指定結點的子結點在集群中的信息(坐標,深度等).
cluster.links - 指定一個子結點數組(通常是**nodes**函數返回值), 計算它們與父結點的連接信息.
cluster.separation - 獲取或設置相鄰結點間的間隔(不僅限於兄弟結點).
cluster.size - 獲取或設置布局的 *寬* 和 *高* 的大小.
cluster.nodeSize - 為結點指定大小.


2.10 層包(Pack)

d3.layout.pack - 用遞歸的圓環表現一個多層級布局.

pack.sort - 獲取或設置一個函數, 用來給兄弟節點(同一父結點的子結點)排序.
pack.children - 獲取或設置子結點的訪問器.
pack.nodes - 計算並返回指定結點的子結點信息.
pack.links - 指定一個子結點數組(通常是**nodes**函數返回值), 計算它們與父結點的連接信息.
pack.value - 獲取或設置一個函數, 用來計算圓環的大小(近似值).
pack.size - 設置整個布局畫布的 *寬* and *高*.
pack.radius - 如果不想結點半徑與結點的值相同, 可以傳入一個函數用來計算結點半徑.
pack.padding - 指定相鄰結點之點的間距(近似值).


2.11 分區(Partition)

d3.layout.partition - 將一棵樹遞歸的分區.

partition.sort - 獲取或設置一個函數, 用來給兄弟節點(同一父結點的子結點)排序.
partition.children - 獲取或設置子結點的訪問器.
partition.nodes - 計算並返回指定結點的子結點信息.
partition.links - 指定一個子結點數組(通常是**nodes**函數返回值), 計算它們與父結點的連接信息.
partition.value - 設置一個函數來來計算分區的值.
partition.size - 設置整個布局畫布的 *寬* and *高*.


2.12 矩陣樹(Treemap)

d3.layout.treemap - 返回一個矩陣樹對象(用矩陣來展示一顆樹).

treemap.sort - 設置或獲取一個函數, 用來給兄弟節點(同一父結點的子結點)排序.
treemap.children - 設置或獲取子結點的訪問器.
treemap.nodes - 計算並返回指定結點的子結點信息.
treemap.links - 指定一個子結點數組(通常是**nodes**函數返回值), 計算它們與父結點的連接信息.
treemap.value- 設置或獲取一個用來計算單元格大小的值訪問器.
treemap.size - 指定整個布局的寬和高.
treemap.padding - 指定父結點和子結點的間距.
treemap.round - 禁用或啟用邊界補償.
treemap.sticky - 讓布局更"粘"以保證在更新數據時有平滑的動畫效果.
treemap.mode - 更改矩陣樹的布局算法.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM