17 Star 125 Fork 38

Huoyo / metricflow

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

MetricFlow.js


MetricFlow是一个前端画图的javascript库,可用于构建可拖拽、可灵活定义的流程图、网络图、知识图谱展示等

python版本请移步ndraw

展示

参考demo6.html 输入图片说明

参考demo15.html 输入图片说明

快速上手

0.引入

  • 原生引入

下载发行版本

<script src="metricflow.js"></script>
  • npm安装

npm install metricflow

let MetricFlow = require("metricflow")

1. 创建画布

创建画布只需要定义div标签即可,并声明画布的widthheight

<div id="graph" height="700px" width="1100px" ></div>

2. 创建节点

/*在画布上创建图*/
let metricFlow = MetricFlow("graph")
/*定义节点数据*/
let nodeData= {
    "id":"primaryKey",//id在全局中不能重复,否则会被覆盖
    "title":{'name':"运行时间统计"},
    "data":[
       {'name':'方法:IndexController#method1'},
       {'name':'平均耗时:0.333ms'},
     ]
};
/*在(20,200)坐标上创建一个节点*/
let node1 = metricFlow.createNode(nodeData,10,200);
/*或者直接在nodeData中定义位置x和y属性,然后*/
/*metricFlow.createNode(nodeData);*/

创建节点demo1.html

输入图片说明

3. 创建连线

let metricFlow = MetricFlow("graph")
let node1Data= {
    "x":10,
    "y":200,
    "id":"node1",
    "title":{'name':"运行时间统计"},
    "data":[
       {'name':'方法:IndexController#method1'},
       {'name':'平均耗时:0.333ms'},
     ]
};
let node1 = metricFlow.createNode(node1Data);

let node2Data= {
    "x":300,
    "y":200,
    "id":"node2",
    "title":{'name':"运行时间统计"},
    "data":[
       {'name':'方法:IndexController#method1'},
       {'name':'平均耗时:0.333ms'},
     ]
};
let node2 = metricFlow.createNode(node2Data);
/*连接两个节点 连线的起始位置在哪个位置无需关心,会自动判断 比如目标节点在
起始节点下方  那么连线从起始节点的下方开始到目标接线的上方位置
*/
metricFlow.createLink(node1,node2);

或者直接在末尾节点中指定from属性,无需metricFlow.createLink(node1,node2);

let metricFlow = MetricFlow("graph")
let node1Data= {
    "x":10,
    "y":200,
    "id":"node1",
    "title":{'name':"运行时间统计"},
    "data":[]
};
let node1 = metricFlow.createNode(node1Data);

let node2Data= {
    "x":300,
    "y":200,
    "id":"node2",
    "from":"node1",//from的值可以是string 也可以是数组
    "title":{'name':"运行时间统计"},
    "data":[]
};
let node2 = metricFlow.createNode(node2Data);

创建连线demo(两个节点)-demo2.html 输入图片说明

创建连线demo(三个节点)-demo3.html 输入图片说明

4. 批量创建节点

批量创建节点有两种方式,第一种使用list创建,并在每个节点数据中指定from属性即可创建关系:


            let metricFlow = MetricFlow("graph")

            /*定义节点数据*/
               let node1Data= {
                "x":20,
                "y":200,
                "id":"node1",
                "title":{'name':"节点1"}
            };

            let node2Data= {
                "x":300,
                "y":50,
                "id":"node2",
                "from":"node1",
                "title":{'name':"节点2"}
            };
            let node3Data= {
                "x":300,
                "y":300,
                "id":"node3",
                "from":"node1",
                "title":{'name':"节点3"}
            };
            let node4Data= {
                "x":500,
                "y":200,
                "id":"node4",
                "from":['node2','node3'],
                "title":{'name':"节点3"},
                "data":[
                    {'name':"1.xxxx"},
                    {'name':"2.xxxx"},
                ]
            };
            let nodes = [node1Data,node2Data,node3Data,node4Data];
            metricFlow.createNodes(nodes);

批量创建节点-demo7.html

输入图片说明 输入图片说明

第二种使用children属性创建,根节点的x和y需指定,其余子节点默认会自动向右排列

let nodes= {
            "x":20,
            "y":200,
             ...
            "children":[
                {
                    "id":"node3",
                     ...
                    "children":[
                        {...}
                    ]
                },
            ]
        };

metricFlow.createNodes(nodes);

批量创建节点-demo9.html

输入图片说明

自动创建的时候如果节点间距不合适,可调整

let options = {
                'node-distance-offsetx':5,//左右间距+5
                'node-distance-offsety':-5//上下间距-5
            };
let metricFlow = MetricFlow("graph",options)

如果需要自动向下排列,可调整

let options = {
        "flow":"vertical" //horizontal水平排列  vertical垂直排列
    };
let metricFlow = MetricFlow("graph",options)

垂直排列-demo12.html

自动创建的时候如果数据格式不匹配,又不想遍历处理,可传入函数调整

function format(data){
    data['title'] = {'name':"更改title的名字"};
    return data;
}
metricFlow.createNodes(nodes,format);

批量创建节点-demo9.html

样式定义

1. 更改节点样式

在节点上添加style属性即可

let node2Data= {
    "id":"node2",
    "style":{
                    "node-type": "circle",//节点类型{metric,circle,rectangle} 默认为metric v1.1.4新增
                    'node-width':'3px',//节点宽度 默认自适应,指定以后可固定 v1.1.3增加
                    'node-height':'3px',//节点高度 默认自适应,指定以后可固定 v1.1.3增加
                    'border-width':'3px',//边框厚度 v1.1.3增加
                    'border-color':'black',//边框颜色
                    'title-color':'black',//标题背景颜色
                    'title-font-color':'white',//标题字体颜色
                    'title-font-size':'13px',//标题字体大小
                    'data-color':'white',//数据背景颜色
                    'data-font-size':'13px',//数据字体大小
                    'data-font-color':'red',//数据字体颜色
                },
    "title":{'name':"运行时间统计"},
    "data":[
       {'name':'方法:IndexController#method1'},
       {'name':'平均耗时:0.333ms'},
     ]
};

样式定义demo-demo8.html

单个节点添加不方便可以批量

metricFlow.createNodes(nodeList,addColors);
 function addColors(data) {
        data['style'] = {
            'border-color':'black',//边框颜色
            'title-color':'black',//标题背景颜色
            'title-font-color':'white',//标题字体颜色
            'title-font-size':'13px',//标题字体大小
            'data-color':'white',//数据背景颜色
            'data-font-size':'13px',//数据字体大小
            'data-font-color':'red',//数据字体颜色
        }
        return data
    }

样式定义demo-demo7.html

连线配置

连线位置目前仅支持偏移量定义,可在创建MetricFlow时定义

连线分为起始点和终点,可设置全局的起始点的偏移位置,主要考虑前端框架使用较为复杂时css冲突所导致位置偏移的校正

let options = {
                'link-start-offsetx':1,//起始点向右偏移一个单位
                'link-start-offsety':-1,//起始点向上偏移一个单位
                'link-end-offsetx':-1,
                'link-end-offsety':-1,
                'link-width-offset':-1,//线段粗细减小1个单位
                'link-color':"blue", //更改线段颜色
                'node-distance-offsetx': -55,//自动向右排列时 两节点之间距离-55
                'node-distance-offsety': -55,//自动向下排列时 两节点之间距离-55
            };
let metricFlow = MetricFlow("graph",options)

连线位置demo-demo5.html

禁止拖拽

let options = {
                'drag':false
            };
let metricFlow = MetricFlow("graph",options)

节点事件

支持基本的鼠标事件,如clickdblclickmousedownmouseup等,与原生js一致,事件在对应节点身上配置即可:

let node1Data= {
            "id":"primaryKey",
            "title":{'name':"双击"},
            'click':"sinclick", //单击 sinclick为函数名
            'dblclick':"doubleClick",//双击
            "data":[
               {'name':'方法:IndexController#method1'},
               {'name':'平均耗时:0.333ms'},
             ]
        };

节点事件demo-demo11.html

节点事件demo-demo14.html

版本说明

V1.0.0:创建节点;连线;样式定义;鼠标事件

V1.0.1:新增自动向下布局

版权说明

1.本项目版权属作者所有,并使用 Apache-2.0进行开源;

2.您可以使用本项目进行学习、商用或者开源,但任何使用了本项目的代码的软件和项目请尊重作者的原创权利;

3.如果您使用并修改了本项目的源代码,请注明修改内容以及出处;

4.其他内容请参考Apache-2.0

Repository Comments ( 15 )

Sign in to post a comment

About

MetricFlow是一个前端画图的javascript库,可用于构建流程图、网络图、知识图谱展示等 expand collapse
JavaScript
Apache-2.0
Cancel

Releases (10)

All

metricflow

Contributors

All

Activities

Load More
can not load any more
JavaScript
1
https://gitee.com/huoyo/metricflow.git
git@gitee.com:huoyo/metricflow.git
huoyo
metricflow
metricflow
master

Search

101014 b92fc32e 1850385 101014 af024cb7 1850385