D3.js學(xué)習(xí)筆記(5)--布局(構(gòu)圖)

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ù)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 布局將數(shù)據(jù)計算成為方便繪圖的數(shù)據(jù)D3提供布局12個 1 d3.pie() 餅圖 通過d3.pie()計算數(shù)據(jù),d3...
    Doter閱讀 500評論 0 1
  • 本節(jié)內(nèi)容將描述餅狀圖、力導(dǎo)向圖、弦圖、集群圖、樹狀圖、打包圖、分區(qū)圖、圓形分區(qū)圖、直方圖、捆圖、堆棧圖、矩陣樹圖、...
    笨笨的笨小孩閱讀 6,773評論 0 2
  • 上一節(jié)中, 我們對于svg 的坐標系統(tǒng) 和 常用的比例尺進行了學(xué)習(xí), 了解了坐標軸的建立,懂得了數(shù)據(jù)綁定和事件回調(diào)...
    金字笙調(diào)閱讀 1,800評論 0 4
  • layout的作用:轉(zhuǎn)化數(shù)據(jù)格式,使其變?yōu)榭梢暬枰臄?shù)據(jù)格式。 d3中的layout分別有:1.Bundle-...
    桃桃閱讀 1,864評論 0 1
  • 我家有一只小狗,它很可愛。她的鼻子是帶點兒的,很好玩。你要是手摸著鼻子傳到哪去,那個鼻子就會轉(zhuǎn)到哪去?小狗還是紅色...
    41f9d0a5c8db閱讀 345評論 0 0

友情鏈接更多精彩內(nèi)容