源碼鏈接：https://github.com/nelsonkuang/ant-admin/blob/master/src/utils/d3-viz.js

的二分圖部分。

1、整體的級(jí)聯(lián)結(jié)構(gòu)

整個(gè)bp代碼涉及到一種代碼的級(jí)聯(lián)結(jié)構(gòu)：

運(yùn)行結(jié)果：

L13行的運(yùn)行結(jié)果類似于 333.call(viz(111).data(222))【當(dāng)然這句話不能直接運(yùn)行】

2、整體函數(shù)列表

?

繪圖的函數(shù)

設(shè)置繪圖的原始數(shù)據(jù)

是顏色填充規(guī)則，需要傳入一個(gè)函數(shù)

用于指定原始數(shù)據(jù)的哪一列作為first part

用在d3.nest()中

用于指定原始數(shù)據(jù)的哪一列作為second part

用在d3.nest()中

用于指定原始數(shù)據(jù)的哪一列作為邊的權(quán)值

bp圖的寬

bp圖的高

bar的粗細(xì)

bar的最小長度

bp布局方向，（horizontal, vertical）

bar之間的padding,一般為0，否則可能兩部????分的bar的總長度差別過大

?

邊連接是用曲線還是直線（curved，straight）

返回第四節(jié)的繪圖數(shù)據(jù)

用于視圖的更新，當(dāng)用戶數(shù)據(jù)改變的時(shí)候調(diào)????用，這樣比重新繪制更快。

mouseout事件，調(diào)用的函數(shù)

?

?

?

?

3、原始測(cè)試數(shù)據(jù)

var data=[ ['A','X', 2] ,['A','Y', 3] ,['B','X', 5] ,['B','Y', 8] ,['C','X', 2] ,['C','Y', 9] ];

4、繪圖數(shù)據(jù)

5、重點(diǎn)函數(shù)接口

1、Fill

Tips：

關(guān)于'=>'的用法見：https://blog.csdn.net/yangxiaodong88/article/details/80460332

z(0) ,z(1), z('a'),z('abc')都是能返回一個(gè)rgb的

d.primary 取值范圍（ A, B ,C）

2、bp中的方法，它們結(jié)構(gòu)都比較類似，主要返回?cái)?shù)據(jù)或者一個(gè)方法，用于參數(shù)的設(shè)置。

3、bp() 圖形繪制函數(shù)，沒啥難度

函數(shù)的第三句調(diào)用了一個(gè)bars = biPartite.bars(); 生成了繪圖數(shù)據(jù)，見第四節(jié)。這句話是整段程序程序處理的核心。

4、bars()

//小于最小值，把他設(shè)為最小值

5、calculateMainBars

---

?

ps數(shù)據(jù)：

nest把表格數(shù)據(jù)轉(zhuǎn)化成樹結(jié)構(gòu)的數(shù)據(jù)。

?

---

?

var bars = bpmap(ps, biPartite.pad(), biPartite.min(), 0, _or=="vertical" ? biPartite.height() : biPartite.width())

把傳入的primary或secondary (原始數(shù)據(jù)的一半)生成rect的信息。

bars:

---

?

S: start（rect的起始位置） e:end（rect的結(jié)束位置） p:present

?

---

?

x:_or=="horizontal"? (bars[i].s+bars[i].e)/2 : (part=="primary" ? bsize/2 : biPartite.width()-bsize/2)

分了三種情況：

水平布局的話：對(duì)x來說，無所謂primary或secondary ，直接取此rect的中間位置。

垂直布局的話：primary當(dāng)然在左側(cè)，取bsize/2；bsize是用戶設(shè)定的bar的粗細(xì)。Secondary在右側(cè)，取biPartite.width()-bsize/2。

注意此時(shí)x取的是整個(gè)rect的中間位置。

---

?

height:_or=="vertical"? (bars[i].e - bars[i].s)/2 : bsize/2

很好理解，就是取了整個(gè)rect一半的高度，圖示如下：

6、calculateSubBars

就是把數(shù)據(jù)按part分成兩層，看第一層的每個(gè)元素a對(duì)應(yīng)第二層的幾個(gè)元素，再把a(bǔ)進(jìn)行分割成等比例（按第二層的元素占比）的幾個(gè)元素

7、calculateEdges

8、edgeVert

其中'M'（move to）,'C'(curveto)都是大寫的，表示絕對(duì)定位。(小寫的表示相對(duì)定位)。'Z'(closepath)從當(dāng)前位置到起點(diǎn)畫一條直線閉合。

C表示三階貝塞爾曲線，參數(shù)為三個(gè)點(diǎn)p1,p2,p3，p3是結(jié)束點(diǎn)，開始點(diǎn)p0與控制點(diǎn)p1控制前半段曲線的彎曲，控制點(diǎn)p2和結(jié)束點(diǎn)p3控制后半段曲線的彎曲。

如圖所示：

9、bp.update

這個(gè)函數(shù)用于原始數(shù)據(jù)的改變，來update

10、綁定在mainBars上的mouseover

傳入的數(shù)據(jù)下面這種類型的obj：

轉(zhuǎn)載于:https://www.cnblogs.com/xunhanliu/p/10478099.html

總結(jié)

以上是生活随笔為你收集整理的NPashaP的二分图源码部分的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。