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