metricflow
v1.2.1
Published
a graph library for javascript
Readme
MetricFlow.js
python版本请移步ndraw
展示
快速上手
0.引入
- 原生引入
下载 发行版本
<script src="metricflow.js"></script>- npm安装
npm install metricflow
let MetricFlow = require("metricflow")1. 创建画布
创建画布只需要定义div标签即可，并声明画布的width和height
<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);*/
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);
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);
第二种使用children属性创建，根节点的x和y需指定，其余子节点默认会自动向右排列
let nodes= {
"x":20,
"y":200,
...
"children":[
{
"id":"node3",
...
"children":[
{...}
]
},
]
};
metricFlow.createNodes(nodes);
自动创建的时候如果节点间距不合适，可调整
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)
自动创建的时候如果数据格式不匹配，又不想遍历处理，可传入函数调整
function format(data){
data['title'] = {'name':"更改title的名字"};
return data;
}
metricFlow.createNodes(nodes,format);样式定义
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'},
]
};单个节点添加不方便可以批量
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
}连线配置
连线位置目前仅支持偏移量定义，可在创建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)禁止拖拽
let options = {
'drag':false
};
let metricFlow = MetricFlow("graph",options)节点事件
支持基本的鼠标事件，如click、dblclick、mousedown、mouseup等，与原生js一致，事件在对应节点身上配置即可：
let node1Data= {
"id":"primaryKey",
"title":{'name':"双击"},
'click':"sinclick", //单击 sinclick为函数名
'dblclick':"doubleClick",//双击
"data":[
{'name':'方法：IndexController#method1'},
{'name':'平均耗时：0.333ms'},
]
};主要api参考
创建节点：createNode(param, x, y)
批量创建节点：createNodes(params)
创建连接：createLink(sourceDom, targetDom)
清除所有节点：clearAll()
切换拖拽状态：switchDrag()
绑定连线事件：bindLinkEvent(startNodeId,endNodeId,eventName,funcName)
绑定节点事件：bindNodeEvent(nodeId,eventName,funcName)
根据节点事件获取节点id：getNodeId(e)
获取节点位置：getNodeXy(nodeId)
获取节点信息：getNodeInfo(nodeId)
设置节点颜色：setColor(nodeId,titleColor,borderColor)
设置连线颜色：setLinkColor(startNodeId,endNodeId,color)
设置标题：setTitle(nodeId,title)
清除连线：removeLink(startNodeId,endNodeId)
伸缩宽度（在原始基础上）：stretchWidth(nodeId,nodeWidth)版本说明
V1.0.0：创建节点；连线；样式定义；鼠标事件
V1.0.1：新增自动向下布局
版权说明
1.本项目版权属作者所有，并使用 Apache-2.0进行开源；
2.您可以使用本项目进行学习、商用或者开源，但任何使用了本项目的代码的软件和项目请尊重作者的原创权利；
3.如果您使用并修改了本项目的源代码，请注明修改内容以及出处；
4.其他内容请参考Apache-2.0