NPashaP的二分图源码部分

源码链接：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：