• 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())

    把传入的primarysecondary (原始数据的一半)生成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来说,无所谓primarysecondary ,直接取此rect的中间位置。

    垂直布局的话:primary当然在左侧,取bsize/2bsize是用户设定的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:

  • 相关阅读:
    《临江仙·滚滚长江东逝水》
    .net Core Newtonsoft.Json 解析巨坑之注释影响代码
    C# 后端post请求帮助类
    鼠标点击事件
    常用Windows 消息列表
    WinUser.h>>>OnMessage事件
    Jellyfin流媒体服务器搭建和一些小坑
    ios开发遇到的问题
    节省你的时间,用AHK实现随机打开文件
    一些简单的AHK脚本提升电脑使用体验
  • 原文地址:https://www.cnblogs.com/xunhanliu/p/10478099.html
Copyright © 2020-2023  润新知