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:
最新文章
- nodeType的返回
- Blackfin DSP(七):用SPORT口模拟SPI
- 【GOF23设计模式】迭代器模式
- SQL重复记录查询(转载)
- Leetcode: Reverse Integer 正确的思路下-要考虑代码简化
- c语言: Standard C 语言标准函数库
- Spring自动化装配bean
- ";HK";日常之制作一只QQ刷屏
- ERP小金刚Pro专业大比拼: Dynamics,NetSuite和Odoo
- swust oj 984
- 2017软工实践K班总结
- 利用教育邮箱注册JetBrains产品(pycharm、idea等)的方法
- Codeforces 999D Equalize the Remainders (set使用)
- 转:Linux环境变量设置方法总结 PATH、LD_LIBRARY_PATH
- WPF中路由事件的传播
- ThreadLocal 详解
- vue使用watch 观察路由变化,重新获取内容
- 利用oneproxy实现mysql读写分离搭建笔记
- MQTT的学习研究(七)基于HTTP POST MQTT 发布消息服务端使用
- Navicat连接服务器上的Mysql数据库
热门文章
- VC下加载多种格式图片的方法总结IPicture, CxImage, CImage(AtlImage), CPictureEx
- 细数SuperComputer最新排名和常见Benchmark类型
- Android封装类似微信的顶部TitleBar弹出的PopupWindow代码
- SSH框架下的多表增删改查
- QT笔记 -- (5) 实现QWidget的paintEvent函数,在widget上画背景图形
- 运维派 企业面试题4&;5 创建10个 用户 ; ping探测主机是否在线
- ajaxFileUpload 返回的数据报错
- ubuntu 装tensorflow出现 conda install ERROR missing write permission错误
- vue-quill-editor-upload : 实现vue-quill-editor上传图片到服务器
- 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询