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)系作者
  • 序言:七十年代末淑廊,一起剝皮案震驚了整個濱河市逗余,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌季惩,老刑警劉巖录粱,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異画拾,居然都是意外死亡啥繁,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門青抛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來旗闽,“玉大人,你說我怎么就攤上這事∠芏茫” “怎么了愁茁?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長亭病。 經(jīng)常有香客問我鹅很,道長,這世上最難降的妖魔是什么罪帖? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任促煮,我火速辦了婚禮,結(jié)果婚禮上整袁,老公的妹妹穿的比我還像新娘菠齿。我一直安慰自己,他們只是感情好坐昙,可當我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布绳匀。 她就那樣靜靜地躺著,像睡著了一般炸客。 火紅的嫁衣襯著肌膚如雪疾棵。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天痹仙,我揣著相機與錄音是尔,去河邊找鬼。 笑死开仰,一個胖子當著我的面吹牛拟枚,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播众弓,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼恩溅,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了田轧?” 一聲冷哼從身側(cè)響起暴匠,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎傻粘,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體帮掉,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡弦悉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了蟆炊。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片稽莉。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖涩搓,靈堂內(nèi)的尸體忽然破棺而出污秆,到底是詐尸還是另有隱情劈猪,我是刑警寧澤,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布良拼,位于F島的核電站战得,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏庸推。R本人自食惡果不足惜常侦,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望贬媒。 院中可真熱鬧聋亡,春花似錦、人聲如沸际乘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽脖含。三九已至罪塔,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間器赞,已是汗流浹背垢袱。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留港柜,地道東北人请契。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像夏醉,于是被迫代替她去往敵國和親爽锥。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容

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