test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-04 20:59:15 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity
b0ee9fe333
g6/demos/interact-focus-center.html

685 lines
14 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>
Reference in New Issue View Git Blame Copy Permalink