d3佈局

d3的佈局,其實是一個轉換函數,將 原始數據 轉換爲 該佈局須要的數據。node

並不能直接經過佈局生成圖形,仍然須要本身根據數據去添加圖形。算法

1.經常使用佈局有12種數組

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




數據結構

層級圖(Hierarchy)函數

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



佈局

這 12 個佈局中,層級圖(Hierarchy)不能直接使用,但它衍生擴展而來的集羣圖、打包圖、分區圖、樹狀圖、矩陣樹圖倒是能夠直接用於商業化。動畫

2. 各類佈局的方法spa

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 - 更改矩陣樹的佈局算法.

相關文章
相關標籤/搜索