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

的二分圖部分。

1、整體的級聯結構

整個bp代碼涉及到一種代碼的級聯結構：

運行結果：

L13行的運行結果類似于 333.call(viz(111).data(222))【當然這句話不能直接運行】

2、整體函數列表

?

繪圖的函數

設置繪圖的原始數據

是顏色填充規則，需要傳入一個函數

用于指定原始數據的哪一列作為first part

用在d3.nest()中

用于指定原始數據的哪一列作為second part

用在d3.nest()中

用于指定原始數據的哪一列作為邊的權值

bp圖的寬

bp圖的高

bar的粗細

bar的最小長度

bp布局方向，（horizontal, vertical）

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

?

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

返回第四節的繪圖數據

用于視圖的更新，當用戶數據改變的時候調????用，這樣比重新繪制更快。

mouseout事件，調用的函數

?

?

?

?

3、原始測試數據

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

4、繪圖數據

5、重點函數接口

1、Fill

Tips：

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

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

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

2、bp中的方法，它們結構都比較類似，主要返回數據或者一個方法，用于參數的設置。

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

函數的第三句調用了一個bars = biPartite.bars(); 生成了繪圖數據，見第四節。這句話是整段程序程序處理的核心。

4、bars()

//小于最小值，把他設為最小值

5、calculateMainBars

---

?

ps數據：

nest把表格數據轉化成樹結構的數據。

?

---

?

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

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

bars:

---

?

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

?

---

?

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

分了三種情況：

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

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

注意此時x取的是整個rect的中間位置。

---

?

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

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

6、calculateSubBars

就是把數據按part分成兩層，看第一層的每個元素a對應第二層的幾個元素，再把a進行分割成等比例（按第二層的元素占比）的幾個元素

7、calculateEdges

8、edgeVert

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

C表示三階貝塞爾曲線，參數為三個點p1,p2,p3，p3是結束點，開始點p0與控制點p1控制前半段曲線的彎曲，控制點p2和結束點p3控制后半段曲線的彎曲。

如圖所示：

9、bp.update

這個函數用于原始數據的改變，來update

10、綁定在mainBars上的mouseover

傳入的數據下面這種類型的obj：

轉載于:https://www.cnblogs.com/xunhanliu/p/10478099.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。