D3提供的布局有12種,具體見官網(wǎng):https://d3js.org/
布局不是要直接繪圖而是獲取繪圖所需數(shù)據(jù)
Bundle
d3.layout.bundle - 構(gòu)造一個新的捆圖布局
bundle - 應(yīng)用霍頓的邊緣捆綁算法
弦圖(Chord)
d3.layout.chord - 初始化一個弦圖對象, 返回一個 Chord 實例
chord.matrix - 設(shè)置或者獲取弦圖實例對應(yīng)的矩陣數(shù)據(jù)
chord.padding - 設(shè)置或獲取弦圖各段圓弧之間的間隔角度
chord.sortGroups - 設(shè)置或獲取矩陣分組的排序函數(shù)
chord.sortSubgroups - 設(shè)置或獲取矩陣二級分組的排序函數(shù)
chord.sortChords - 設(shè)置或獲取弦圖在z序上的排序函數(shù)(決定哪一組顯示在最上層)
chord.chords - 該函數(shù)會將參數(shù)處理成對 chord 更友好的格式并返回, 若沒有提供參數(shù), 會調(diào)用matrix()來獲取數(shù)據(jù)
chord.groups - 該函數(shù)參數(shù)處理成更易于理解的分組信息, 若沒有提供參數(shù), 會調(diào)用matrix()來獲取數(shù)據(jù)
集群(Cluster)
d3.layout.cluster - 用默認設(shè)置生成一個集群布局對象.
cluster.sort - 獲取或設(shè)置一個函數(shù), 用來給兄弟節(jié)點(同一父結(jié)點的子結(jié)點)的排序.
cluster.children - 獲取或設(shè)置子結(jié)點的訪問器.
cluster.nodes - 計算并返回指定結(jié)點的子結(jié)點在集群中的信息(坐標,深度等).
cluster.links - 指定一個子結(jié)點數(shù)組(通常是**nodes**函數(shù)返回值), 計算它們與父結(jié)點的連接信息.
cluster.separation - 獲取或設(shè)置相鄰結(jié)點間的間隔(不僅限于兄弟結(jié)點).
cluster.size - 獲取或設(shè)置布局的 *寬* 和 *高* 的大小.
cluster.nodeSize - 為結(jié)點指定大小.
力學(xué)(Force)
d3.layout.force -節(jié)點(node)基于物理模擬的位置連接蛔趴。
force.on - 監(jiān)聽布局位置的變化底瓣。(僅支持"start","step","end"三種事件)
force.nodes - 獲得或設(shè)置布局中的節(jié)點(node)陣列組。
force.links - 獲得或設(shè)置布局中節(jié)點間的連接(Link)陣列組删顶。.
force.size - 獲取或設(shè)置布局的 *寬* 和 *高* 的大小.
force.linkDistance - 獲取或設(shè)置節(jié)點間的連接線距離.
force.linkStrength - 獲取或設(shè)置節(jié)點間的連接強度.
force.friction - 獲取或設(shè)置摩擦系數(shù).
force.charge - 獲取或設(shè)置節(jié)點的電荷數(shù).(電荷數(shù)決定結(jié)點是互相排斥還是吸引)
force.gravity - 獲取或設(shè)置節(jié)點的引力強度.
force.theta - 獲取或設(shè)置電荷間互相作用的強度.
force.start - 開啟或恢復(fù)結(jié)點間的位置影響.
force.resume - 設(shè)置冷卻系數(shù)為0.1,并重新調(diào)用start()函數(shù).
force.stop - 立刻終止結(jié)點間的位置影響.(等同于將*冷卻系數(shù)*設(shè)置為0)
force.alpha - 獲取或設(shè)置布局的冷卻系數(shù).(冷卻系數(shù)為0時,節(jié)點間不再互相影響)
force.tick - 讓布局運行到下一步.
force.drag - 獲取當前布局的拖拽對象實例以便進一步綁定處理函數(shù).
層級布局(Hierarchy)
d3.layout.hierarchy - 獲得一個自定義的層級布局的實現(xiàn).
hierarchy.sort - 獲取或設(shè)置一個函數(shù), 用來給兄弟節(jié)點(同一父結(jié)點的子結(jié)點)的排序.
hierarchy.children - 獲取或設(shè)置子結(jié)點的訪問器.
hierarchy.nodes - 計算并返回指定結(jié)點的子結(jié)點信息.
hierarchy.links - 指定一個子結(jié)點數(shù)組(通常是**nodes**函數(shù)返回值), 計算它們與父結(jié)點的連接信息.
hierarchy.value - 獲取或設(shè)置結(jié)點的**值**訪問器.
hierarchy.revalue - 重新計算層級布局.
直方圖(Histogram)
d3.layout.histogram - 構(gòu)建一個默認直方圖(用來表示一組離散數(shù)字的分布,橫軸表示區(qū)間,縱軸表示區(qū)間內(nèi)樣本數(shù)量或樣本百分比).
histogram.value - 獲取或設(shè)置值訪問器.
histogram.range - 獲取或設(shè)置合法值范圍.
histogram.bins - 指定如何將數(shù)據(jù)分組到不同的區(qū)間(bin)里, 返回一個構(gòu)造函數(shù)
histogram - 根據(jù)已設(shè)置的區(qū)間將數(shù)據(jù)分組,返回已分組的二維數(shù)組).
histogram.frequency - 設(shè)置直方圖Y軸值是區(qū)間內(nèi)數(shù)據(jù)的總量還是百分比
層包(Pack)
d3.layout.pack - 用遞歸的圓環(huán)表現(xiàn)一個多層級布局.
pack.sort - 獲取或設(shè)置一個函數(shù), 用來給兄弟節(jié)點(同一父結(jié)點的子結(jié)點)排序.
pack.children - 獲取或設(shè)置子結(jié)點的訪問器.
pack.nodes - 計算并返回指定結(jié)點的子結(jié)點信息.
pack.links - 指定一個子結(jié)點數(shù)組(通常是**nodes**函數(shù)返回值), 計算它們與父結(jié)點的連接信息.
pack.value - 獲取或設(shè)置一個函數(shù), 用來計算圓環(huán)的大小(近似值).
pack.size - 設(shè)置整個布局畫布的 *寬* and *高*.
pack.radius - 如果不想結(jié)點半徑與結(jié)點的值相同, 可以傳入一個函數(shù)用來計算結(jié)點半徑.
pack.padding - 指定相鄰結(jié)點之點的間距(近似值).
分區(qū)(Partition)
d3.layout.partition - 將一棵樹遞歸的分區(qū).
partition.sort - 獲取或設(shè)置一個函數(shù), 用來給兄弟節(jié)點(同一父結(jié)點的子結(jié)點)排序.
partition.children - 獲取或設(shè)置子結(jié)點的訪問器.
partition.nodes - 計算并返回指定結(jié)點的子結(jié)點信息.
partition.links - 指定一個子結(jié)點數(shù)組(通常是**nodes**函數(shù)返回值), 計算它們與父結(jié)點的連接信息.
partition.value - 設(shè)置一個函數(shù)來來計算分區(qū)的值.
partition.size - 設(shè)置整個布局畫布的 *寬* and *高*.
餅圖(pie)
d3.layout.pie - 構(gòu)建一個默認的餅圖.
pie - 該函數(shù)將傳入的原始參數(shù)轉(zhuǎn)換成可用于餅圖或者環(huán)形圖的數(shù)據(jù)結(jié)構(gòu).
pie.value - 獲取或設(shè)置值訪問器.
pie.sort - 設(shè)置餅圖順時針方向的排序方法.
pie.startAngle - 設(shè)置或獲取整個餅圖的起始角度.
pie.endAngle - 設(shè)置或獲取整個餅圖的終止角度.
堆疊圖(Stack)
d3.layout.stack - 構(gòu)建一個默認的堆疊圖(用來展示一系列x軸相同的面積圖或者立方圖).
stack - 計算每一層的基線.
stack.values - 設(shè)置或者獲取每層的值訪問器.
stack.order - 設(shè)置每層的排序.
stack.offset - 指定總的基線算法.
stack.x - 設(shè)置或獲取每層的x軸訪問器.
stack.y - 設(shè)置或獲取每層的y軸訪問器.
stack.out - 設(shè)置或獲取用來儲存基線的輸出函數(shù).
樹(Tree)
d3.layout.tree - position a tree of nodes tidily.
tree.sort - 設(shè)置或獲取一個函數(shù), 用來給兄弟節(jié)點(同一父結(jié)點的子結(jié)點)排序.
tree.children - 設(shè)置或獲取子結(jié)點的訪問器.
tree.nodes - 計算并返回指定結(jié)點的子結(jié)點信息.
tree.links - 指定一個子結(jié)點數(shù)組(通常是**nodes**函數(shù)返回值), 計算它們與父結(jié)點的連接信息.
tree.separation - 設(shè)置或獲取相隔結(jié)點之間的間隔計算函數(shù).
tree.size - 指定整個布局的寬和高.
tree.nodeSize - 給全部結(jié)點指定一個固定的大小(會導(dǎo)致`tree.size`失效)
矩陣樹(Treemap)
d3.layout.treemap - 返回一個矩陣樹對象(用矩陣來展示一顆樹).
treemap.sort - 設(shè)置或獲取一個函數(shù), 用來給兄弟節(jié)點(同一父結(jié)點的子結(jié)點)排序.
treemap.children - 設(shè)置或獲取子結(jié)點的訪問器.
treemap.nodes - 計算并返回指定結(jié)點的子結(jié)點信息.
treemap.links - 指定一個子結(jié)點數(shù)組(通常是**nodes**函數(shù)返回值), 計算它們與父結(jié)點的連接信息.
treemap.value- 設(shè)置或獲取一個用來計算單元格大小的值訪問器.
treemap.size - 指定整個布局的寬和高.
treemap.padding - 指定父結(jié)點和子結(jié)點的間距.
treemap.round - 禁用或啟用邊界補償.
treemap.sticky - 讓布局更"粘"以保證在更新數(shù)據(jù)時有平滑的動畫效果.
treemap.mode - 更改矩陣樹的布局算法.
--------以上為D3 提供的布局相關(guān)api-------
最后還是那句話:布局不是要直接繪圖,而是獲取繪圖所需數(shù)據(jù)