mirror of
https://gitee.com/antv/g6.git
synced 2024-12-04 20:59:15 +08:00
692 lines
17 KiB
HTML
692 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>缓慢移动到画布中心</title>
|
||
</head>
|
||
<body>
|
||
<div id="mountNode"></div>
|
||
<script src="../build/g6.js"></script>
|
||
<script src="../build/dagre.js"></script>
|
||
<script>
|
||
const data = {
|
||
edges: [
|
||
{
|
||
callPerf: {
|
||
avgElapse: 0.0,
|
||
calls: 0,
|
||
status: 'success',
|
||
},
|
||
id: 'edge-20233',
|
||
source: 'msgconsole',
|
||
target: 'osp',
|
||
},
|
||
{
|
||
callPerf: {
|
||
avgElapse: 3.2,
|
||
calls: 6,
|
||
status: 'success',
|
||
},
|
||
id: 'edge-20234',
|
||
source: 'dst-web',
|
||
target: 'DB_rm-nh4417a78t2y34vm2.mysql.rds.aliyuncs.com:3306',
|
||
},
|
||
{
|
||
callPerf: {
|
||
avgElapse: 0.0,
|
||
calls: 0,
|
||
status: 'success',
|
||
},
|
||
id: 'edge-20235',
|
||
source: 'USER',
|
||
target: 'dsrconsole',
|
||
},
|
||
{
|
||
callPerf: {
|
||
avgElapse: 0.0,
|
||
calls: 0,
|
||
status: 'success',
|
||
},
|
||
id: 'edge-20236',
|
||
source: 'USER',
|
||
target: 'osp',
|
||
},
|
||
{
|
||
callPerf: {
|
||
avgElapse: 0.0,
|
||
calls: 0,
|
||
status: 'success',
|
||
},
|
||
id: 'edge-20237',
|
||
source: 'USER',
|
||
target: 'dbpconsole',
|
||
},
|
||
{
|
||
callPerf: {
|
||
avgElapse: 0.0,
|
||
calls: 0,
|
||
status: 'success',
|
||
},
|
||
id: 'edge-20238',
|
||
source: 'USER',
|
||
target: 'msgconsole',
|
||
},
|
||
{
|
||
callPerf: {
|
||
avgElapse: 0.0,
|
||
calls: 0,
|
||
status: 'success',
|
||
},
|
||
id: 'edge-20239',
|
||
source: 'USER',
|
||
target: 'drmdata',
|
||
},
|
||
{
|
||
callPerf: {
|
||
avgElapse: 0.0,
|
||
calls: 0,
|
||
status: 'success',
|
||
},
|
||
id: 'edge-20240',
|
||
source: 'drmdata',
|
||
target: 'dsrconsole',
|
||
},
|
||
{
|
||
callPerf: {
|
||
avgElapse: 0.0,
|
||
calls: 0,
|
||
status: 'success',
|
||
},
|
||
id: 'edge-20241',
|
||
source: 'drmdata',
|
||
target: '10.252.216.177:12200',
|
||
},
|
||
{
|
||
callPerf: {
|
||
avgElapse: 0.0,
|
||
calls: 0,
|
||
status: 'success',
|
||
},
|
||
id: 'edge-20242',
|
||
source: 'drmdata',
|
||
target: '10.80.59.63:12200',
|
||
},
|
||
{
|
||
callPerf: {
|
||
avgElapse: 0.0,
|
||
calls: 0,
|
||
status: 'success',
|
||
},
|
||
id: 'edge-20243',
|
||
source: 'drmdata',
|
||
target: '10.80.59.68:12200',
|
||
},
|
||
{
|
||
callPerf: {
|
||
avgElapse: 3.1,
|
||
calls: 28461,
|
||
status: 'success',
|
||
},
|
||
id: 'edge-20244',
|
||
source: 'scheduler',
|
||
target: 'ZDAL_scheduler_ds',
|
||
},
|
||
{
|
||
callPerf: {
|
||
avgElapse: 2.1,
|
||
calls: 300,
|
||
status: 'success',
|
||
},
|
||
id: 'edge-20245',
|
||
source: 'scheduler',
|
||
target: 'MQ',
|
||
},
|
||
{
|
||
callPerf: {
|
||
avgElapse: 3.5,
|
||
calls: 4853,
|
||
status: 'success',
|
||
},
|
||
id: 'edge-20246',
|
||
source: 'dbpconsole',
|
||
target: 'ZDAL_sharedataMysqlDataSource',
|
||
},
|
||
{
|
||
callPerf: {
|
||
avgElapse: 0.0,
|
||
calls: 0,
|
||
status: 'success',
|
||
},
|
||
id: 'edge-20247',
|
||
source: 'dbpconsole',
|
||
target: 'osp',
|
||
},
|
||
{
|
||
callPerf: {
|
||
avgElapse: 0.0,
|
||
calls: 0,
|
||
status: 'success',
|
||
},
|
||
id: 'edge-20248',
|
||
source: 'dsrconsole',
|
||
target: 'osp',
|
||
},
|
||
{
|
||
callPerf: {
|
||
avgElapse: 0.0,
|
||
calls: 0,
|
||
status: 'success',
|
||
},
|
||
id: 'edge-20249',
|
||
source: 'dsrconsole',
|
||
target: 'drmdata',
|
||
},
|
||
{
|
||
callPerf: {
|
||
avgElapse: 0.0,
|
||
calls: 0,
|
||
status: 'success',
|
||
},
|
||
id: 'edge-20250',
|
||
source: 'dsrconsole',
|
||
target: 'antscheduler',
|
||
},
|
||
],
|
||
nodes: [
|
||
{
|
||
apdex: 0.0,
|
||
apdexLevel: 'BAD',
|
||
application: {
|
||
groupId: 'default',
|
||
name: 'msgconsole',
|
||
},
|
||
avgTime: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
errorRate: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
favorite: false,
|
||
favoriteId: 0,
|
||
id: 'msgconsole',
|
||
status: 'success',
|
||
totalCount: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
type: 'app',
|
||
},
|
||
{
|
||
apdex: 0.0,
|
||
apdexLevel: 'BAD',
|
||
application: {
|
||
groupId: 'default',
|
||
name: 'osp',
|
||
},
|
||
avgTime: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
errorRate: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
favorite: false,
|
||
favoriteId: 0,
|
||
id: 'osp',
|
||
status: 'success',
|
||
totalCount: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
type: 'app',
|
||
},
|
||
{
|
||
apdex: 0.0,
|
||
apdexLevel: 'BAD',
|
||
application: {
|
||
groupId: 'default',
|
||
name: 'dst-web',
|
||
},
|
||
avgTime: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
errorRate: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
favorite: false,
|
||
favoriteId: 0,
|
||
id: 'dst-web',
|
||
status: 'success',
|
||
totalCount: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
type: 'app',
|
||
},
|
||
{
|
||
application: {
|
||
groupId: 'default',
|
||
name: 'DB_rm-nh4417a78t2y34vm2.mysql.rds.aliyuncs.com:3306',
|
||
},
|
||
id: 'DB_rm-nh4417a78t2y34vm2.mysql.rds.aliyuncs.com:3306',
|
||
status: 'success',
|
||
type: 'db',
|
||
},
|
||
{
|
||
application: {
|
||
groupId: 'default',
|
||
name: 'USER',
|
||
},
|
||
id: 'USER',
|
||
status: 'success',
|
||
type: 'user',
|
||
},
|
||
{
|
||
apdex: 0.0,
|
||
apdexLevel: 'BAD',
|
||
application: {
|
||
groupId: 'default',
|
||
name: 'dsrconsole',
|
||
},
|
||
avgTime: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
errorRate: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
favorite: false,
|
||
favoriteId: 0,
|
||
id: 'dsrconsole',
|
||
status: 'success',
|
||
totalCount: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
type: 'app',
|
||
},
|
||
{
|
||
apdex: 0.0,
|
||
apdexLevel: 'BAD',
|
||
application: {
|
||
groupId: 'default',
|
||
name: 'dbpconsole',
|
||
},
|
||
avgTime: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
errorRate: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
favorite: false,
|
||
favoriteId: 0,
|
||
id: 'dbpconsole',
|
||
status: 'success',
|
||
totalCount: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
type: 'app',
|
||
},
|
||
{
|
||
apdex: 0.0,
|
||
apdexLevel: 'BAD',
|
||
application: {
|
||
groupId: 'default',
|
||
name: 'drmdata',
|
||
},
|
||
avgTime: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
errorRate: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
favorite: false,
|
||
favoriteId: 0,
|
||
id: 'drmdata',
|
||
status: 'success',
|
||
totalCount: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
type: 'app',
|
||
},
|
||
{
|
||
apdex: 0.0,
|
||
apdexLevel: 'BAD',
|
||
application: {
|
||
groupId: 'default',
|
||
name: '10.252.216.177:12200',
|
||
},
|
||
avgTime: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
errorRate: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
favorite: false,
|
||
favoriteId: 0,
|
||
id: '10.252.216.177:12200',
|
||
status: 'success',
|
||
totalCount: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
type: 'app',
|
||
},
|
||
{
|
||
apdex: 0.0,
|
||
apdexLevel: 'BAD',
|
||
application: {
|
||
groupId: 'default',
|
||
name: '10.80.59.63:12200',
|
||
},
|
||
avgTime: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
errorRate: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
favorite: false,
|
||
favoriteId: 0,
|
||
id: '10.80.59.63:12200',
|
||
status: 'success',
|
||
totalCount: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
type: 'app',
|
||
},
|
||
{
|
||
apdex: 0.0,
|
||
apdexLevel: 'BAD',
|
||
application: {
|
||
groupId: 'default',
|
||
name: '10.80.59.68:12200',
|
||
},
|
||
avgTime: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
errorRate: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
favorite: false,
|
||
favoriteId: 0,
|
||
id: '10.80.59.68:12200',
|
||
status: 'success',
|
||
totalCount: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
type: 'app',
|
||
},
|
||
{
|
||
apdex: 0.0,
|
||
apdexLevel: 'BAD',
|
||
application: {
|
||
groupId: 'default',
|
||
name: 'scheduler',
|
||
},
|
||
avgTime: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
errorRate: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
favorite: false,
|
||
favoriteId: 0,
|
||
id: 'scheduler',
|
||
status: 'success',
|
||
totalCount: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
type: 'app',
|
||
},
|
||
{
|
||
application: {
|
||
groupId: 'default',
|
||
name: 'ZDAL_scheduler_ds',
|
||
},
|
||
id: 'ZDAL_scheduler_ds',
|
||
status: 'success',
|
||
type: 'db',
|
||
},
|
||
{
|
||
application: {
|
||
groupId: 'default',
|
||
name: 'MQ',
|
||
},
|
||
id: 'MQ',
|
||
status: 'success',
|
||
type: 'mq',
|
||
},
|
||
{
|
||
application: {
|
||
groupId: 'default',
|
||
name: 'ZDAL_sharedataMysqlDataSource',
|
||
},
|
||
id: 'ZDAL_sharedataMysqlDataSource',
|
||
status: 'success',
|
||
type: 'db',
|
||
},
|
||
{
|
||
apdex: 0.0,
|
||
apdexLevel: 'BAD',
|
||
application: {
|
||
groupId: 'default',
|
||
name: 'antscheduler',
|
||
},
|
||
avgTime: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
errorRate: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
favorite: false,
|
||
favoriteId: 0,
|
||
id: 'antscheduler',
|
||
status: 'success',
|
||
totalCount: {
|
||
empty: true,
|
||
name: 'avgTime',
|
||
total: 0.0,
|
||
values: [],
|
||
},
|
||
type: 'app',
|
||
},
|
||
],
|
||
};
|
||
// 自定义边
|
||
G6.registerEdge(
|
||
'my-edge',
|
||
{
|
||
// 复写控制点的逻辑
|
||
curvePosition: 0.5, // 弯曲的默认位置
|
||
curveOffset: -20,
|
||
getControlPoints(cfg) {
|
||
const controlPoints = []; // 指定controlPoints
|
||
const level = -5; // 从 -10， 10
|
||
const offset = level * -25; // 根据不同的level 计算不同的偏移
|
||
const { startPoint, endPoint } = cfg;
|
||
const innerPoint = G6.Util.getControlPoint(startPoint, endPoint, 0.5, offset);
|
||
controlPoints.push(innerPoint);
|
||
return controlPoints;
|
||
},
|
||
},
|
||
'quadratic',
|
||
);
|
||
|
||
// 自定义节点，设置锚点
|
||
G6.registerNode('customNode', {
|
||
getAnchorPoints: () => {
|
||
return [
|
||
[0.5, 1],
|
||
[0.5, 0],
|
||
]; // 底边中点
|
||
},
|
||
draw: (model, group) => {
|
||
const widths = 150;
|
||
const heights = 50;
|
||
const aa = group.addShape('text', {
|
||
attrs: {
|
||
x: -widths / 4,
|
||
y: -heights / 25,
|
||
textBaseline: 'middle',
|
||
fill: '#333',
|
||
fontSize: 24,
|
||
text: model.id.substr(0, 5),
|
||
},
|
||
});
|
||
const texta = group.addShape('rect', {
|
||
attrs: {
|
||
x: -widths / 2,
|
||
y: -heights / 2,
|
||
width: widths,
|
||
height: heights,
|
||
stroke: model.isselect ? '#d9d9d9' : 'red',
|
||
fill: model.isselect && 'red',
|
||
radius: 25,
|
||
},
|
||
});
|
||
return texta;
|
||
},
|
||
});
|
||
|
||
const graph = new G6.Graph({
|
||
container: 'mountNode',
|
||
width: 1000,
|
||
height: 800,
|
||
animate: true,
|
||
layout: {
|
||
type: 'dagre',
|
||
},
|
||
modes: {
|
||
default: ['drag-node', 'drag-canvas', 'zoom-canvas'],
|
||
},
|
||
defaultNode: {
|
||
size: [20, 20],
|
||
shape: 'customNode',
|
||
style: {
|
||
fill: '#40a9ff',
|
||
stroke: '#096dd9',
|
||
},
|
||
},
|
||
defaultEdge: {
|
||
shape: 'my-edge',
|
||
style: {
|
||
stroke: '#A3B1BF',
|
||
style: {
|
||
endArrow: true,
|
||
},
|
||
},
|
||
},
|
||
});
|
||
|
||
graph.data(data);
|
||
graph.render();
|
||
|
||
graph.fitView();
|
||
|
||
graph.on('node:click', evt => {
|
||
const { item } = evt;
|
||
const model = item.getModel();
|
||
const point = graph.getPointByCanvas(500, 400);
|
||
const dx = point.x - model.x;
|
||
const dy = point.y - model.y;
|
||
graph.getNodes().forEach(node => {
|
||
const model = node.getModel();
|
||
model.x += dx;
|
||
model.y += dy;
|
||
});
|
||
|
||
graph.refresh();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|