-
antv-G6知识图谱安装--使用(实例）--连接线修改成动态，并添加跟随线移动的光圈，设置分支跟踪定位功能
这系列文章主要是完成一个图谱的自定义修改（最近太忙了长篇分段更新自己使用流程）
1. 连接线修改成动态，并添加跟随线移动的光圈
2. 自定义卡片样式和文字内容（下篇）
3. 自定义伸缩节点的样式，并添加动画样式（下篇）
3. 自定义弹窗样式（下篇）
4. 自定义弹窗样式（下篇）
5. 更新图谱
6. 设置分支跟踪定位功能antv-G6知识图谱安装--使用(实例）
官网地址➡️添加链接描述
前言
提示：antv-G6初次使用(实例+分析注释）项目需要时间紧，直接网上找的加上官网信息，主要内容都有注释
1. 安装—引入antv/g6
- 在项目中使用 NPM 包引入
npm install --save @antv/g6- 1
- 在需要用的 G6 的 JS 文件中导入：
import G6 from '@antv/g6';- 1
2. 官网指引
按照一下创建一个项目之后，大概知道了图谱绘制流程，个人觉得和echart使用有点点相似
3. 找一个实例作自定义修改
1. 先择一个dome图谱
2. 在vue2+js中使用
1. 创建vue文件并引入
import G6 from '@antv/g6';2. 复制官网图谱实例（附上代码）
我不需要缩小图谱后更换样式，就删除了。
<template> <div class="atlasDome"> <div id="container" class="container"> </div> </div> </template> <script> import G6 from '@antv/g6'; export default { name: "atlasDome", components: { }, data() { return { mockData: { id: 'g1',//id是唯一的不能重复 name: 'Name1',//名字 label: '538.90',//金额 currency: 'Yuan',//单位 rate: 1.0,//百分比进度条 status: 'B',//三角形颜色，可以模拟预警信息 variableName: 'V1',//三角形前边小名称 variableValue: 0.341,//百分比 variableUp: false,//也是控制三角形样式变化的 children: [ { id: 'g12', name: 'Deal with LONG label LONG label LONG label LONG label', label: '338.00', rate: 0.627, status: 'R', currency: 'Yuan', variableName: 'V2', variableValue: 0.179, variableUp: true, children: [ { id: 'g121', name: 'Name3', collapsed: true, label: '138.00', rate: 0.123, status: 'B', currency: 'Yuan', variableName: 'V2', variableValue: 0.27, variableUp: true, children: [ { id: 'g1211', name: 'Name4', label: '138.00', rate: 1.0, status: 'B', currency: 'Yuan', variableName: 'V1', variableValue: 0.164, variableUp: false, children: [], }, ], }, { id: 'g122', name: 'Name5', collapsed: true, label: '100.00', rate: 0.296, status: 'G', currency: 'Yuan', variableName: 'V1', variableValue: 0.259, variableUp: true, children: [], }, ], }, { id: 'g13', name: 'Name9', label: '100.90', rate: 0.187, status: 'B', currency: 'Yuan', variableName: 'V2', variableValue: 0.221, variableUp: true, children: [ { id: 'g131', name: 'Name10', label: '33.90', rate: 0.336, status: 'R', currency: 'Yuan', variableName: 'V1', variableValue: 0.12, variableUp: true, children: [], }, { id: 'g132', name: 'Name11', label: '67.00', rate: 0.664, status: 'G', currency: 'Yuan', variableName: 'V1', variableValue: 0.241, variableUp: false, children: [], }, ], }, { id: 'g14', name: 'Name12', label: '100.00', rate: 0.186, status: 'G', currency: 'Yuan', variableName: 'V2', variableValue: 0.531, variableUp: true, children: [], }, ], } }; }, computed: {}, created() { this.$nextTick(() => { this.initAtial() }) }, mounted() { }, methods: { initAtial() { const colors = { B: '#5B8FF9', R: '#F46649', Y: '#EEBC20', G: '#5BD8A6', DI: '#A7A7A7', }; // 组件props const props = { data: this.mockData, config: { padding: [20, 50], defaultLevel: 3, defaultZoom: 0.8, modes: { default: ['zoom-canvas', 'drag-canvas'] }, }, }; const container = document.getElementById('container'); const width = container.scrollWidth; const height = container.scrollHeight || 500; // 默认配置 const defaultConfig = { width, height, modes: { default: ['zoom-canvas', 'drag-canvas'], }, fitView: true, animate: true, defaultNode: { type: 'flow-rect', }, defaultEdge: { type: 'extra-shape-edge', // type: 'cubic-horizontal', style: { stroke: '#CED4D9', }, }, layout: { type: 'indented', direction: 'LR', dropCap: false, indent: 300, getHeight: () => { return 60; }, }, }; // 自定义节点、边 const registerFn = () => { /** * 自定义节点 */ G6.registerNode( 'flow-rect', { shapeType: 'flow-rect', draw(cfg, group) { const { name = '', variableName, variableValue, variableUp, label, collapsed, currency, status, rate } = cfg; const grey = '#CED4D9'; const rectConfig = { width: 202, height: 60, lineWidth: 1, fontSize: 12, fill: '#fff', radius: 4, stroke: grey, opacity: 1, }; const nodeOrigin = { x: -rectConfig.width / 2, y: -rectConfig.height / 2, }; const textConfig = { textAlign: 'left', textBaseline: 'bottom', }; const rect = group.addShape('rect', { attrs: { x: nodeOrigin.x, y: nodeOrigin.y, ...rectConfig, }, }); const rectBBox = rect.getBBox(); // 标签标题 group.addShape('text', { attrs: { ...textConfig, x: 12 + nodeOrigin.x, y: 20 + nodeOrigin.y, text: name.length > 28 ? name.substr(0, 28) + '...' : name, fontSize: 12, opacity: 0.85, fill: '#000', cursor: 'pointer', }, // 必须在G6 3.3及更高版本中分配。它可以是你想要的任何字符串，但在自定义项类型中应该是唯一的 name: 'name-shape', }); // 价格 const price = group.addShape('text', { attrs: { ...textConfig, x: 12 + nodeOrigin.x, y: rectBBox.maxY - 12, text: label, fontSize: 16, fill: '#000', opacity: 0.85, }, }); // 标签的货币 group.addShape('text', { attrs: { ...textConfig, x: price.getBBox().maxX + 5, y: rectBBox.maxY - 12, text: currency, fontSize: 12, fill: '#000', opacity: 0.75, }, }); // 百分比 const percentText = group.addShape('text', { attrs: { ...textConfig, x: rectBBox.maxX - 8, y: rectBBox.maxY - 12, text: `${((variableValue || 0) * 100).toFixed(2)}%`, fontSize: 12, textAlign: 'right', fill: colors[status], }, }); // 三角形比例 const symbol = variableUp ? 'triangle' : 'triangle-down'; const triangle = group.addShape('marker', { attrs: { ...textConfig, x: percentText.getBBox().minX - 10, y: rectBBox.maxY - 12 - 6, symbol, r: 6, fill: colors[status], }, }); // 变量名 group.addShape('text', { attrs: { ...textConfig, x: triangle.getBBox().minX - 4, y: rectBBox.maxY - 12, text: variableName, fontSize: 12, textAlign: 'right', fill: '#000', opacity: 0.45, }, }); // bottom line background const bottomBackRect = group.addShape('rect', { attrs: { x: nodeOrigin.x, y: rectBBox.maxY - 4, width: rectConfig.width, height: 4, radius: [0, 0, rectConfig.radius, rectConfig.radius], fill: '#E0DFE3', }, }); bottomBackRect.set('capture', false); // bottom percent const bottomRect = group.addShape('rect', { attrs: { x: nodeOrigin.x, y: rectBBox.maxY - 4, width: rate * rectBBox.width, height: 4, radius: [0, 0, 0, rectConfig.radius], fill: colors[status], }, }); bottomRect.set('capture', false); // 矩形 if (cfg.children && cfg.children.length) { group.addShape('rect', { attrs: { x: rectConfig.width / 2 - 8, y: -8, width: 16, height: 16, stroke: 'rgba(0, 0, 0, 0.25)', cursor: 'pointer', fill: '#fff', }, // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'collapse-back', modelId: cfg.id, }); // collpase text group.addShape('text', { attrs: { x: rectConfig.width / 2, y: -1, textAlign: 'center', textBaseline: 'middle', text: collapsed ? '+' : '-', fontSize: 16, cursor: 'pointer', fill: 'rgba(0, 0, 0, 0.25)', }, // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'collapse-text', modelId: cfg.id, }); } this.drawLinkPoints(cfg, group); return rect; }, update(cfg, item) { const { level, status, name } = cfg; const group = item.getContainer(); let mask = group.find(ele => ele.get('name') === 'mask-shape'); let maskLabel = group.find(ele => ele.get('name') === 'mask-label-shape'); if (level === 0) { group.get('children').forEach(child => { if (child.get('name')?.includes('collapse')) return; child.hide(); }) if (!mask) { mask = group.addShape('rect', { attrs: { x: -101, y: -30, width: 202, height: 60, opacity: 0, fill: colors[status] }, // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'mask-shape', }); maskLabel = group.addShape('text', { attrs: { fill: '#fff', fontSize: 20, x: 0, y: 10, text: name.length > 28 ? name.substr(0, 16) + '...' : name, textAlign: 'center', opacity: 0, }, // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'mask-label-shape', }); const collapseRect = group.find(ele => ele.get('name') === 'collapse-back'); const collapseText = group.find(ele => ele.get('name') === 'collapse-text'); collapseRect?.toFront(); collapseText?.toFront(); } else { mask.show(); maskLabel.show(); } mask.animate({ opacity: 1 }, 200); maskLabel.animate({ opacity: 1 }, 200); return mask; } else { group.get('children').forEach(child => { if (child.get('name')?.includes('collapse')) return; child.show(); }) mask?.animate({ opacity: 0 }, { duration: 200, callback: () => mask.hide() }); maskLabel?.animate({ opacity: 0 }, { duration: 200, callback: () => maskLabel.hide() }); } this.updateLinkPoints(cfg, group); }, setState(name, value, item) { if (name === 'collapse') { const group = item.getContainer(); const collapseText = group.find((e) => e.get('name') === 'collapse-text'); if (collapseText) { if (!value) { collapseText.attr({ text: '-', }); } else { collapseText.attr({ text: '+', }); } } } }, getAnchorPoints() { return [ [0, 0.5], [1, 0.5], ]; }, }, 'rect', ); G6.registerEdge( 'flow-cubic', { getControlPoints(cfg) { let controlPoints = cfg.controlPoints; // 指定controlPoints if (!controlPoints || !controlPoints.length) { const { startPoint, endPoint, sourceNode, targetNode } = cfg; const { x: startX, y: startY, coefficientX, coefficientY } = sourceNode ? sourceNode.getModel() : startPoint; const { x: endX, y: endY } = targetNode ? targetNode.getModel() : endPoint; let curveStart = (endX - startX) * coefficientX; let curveEnd = (endY - startY) * coefficientY; curveStart = curveStart > 40 ? 40 : curveStart; curveEnd = curveEnd < -30 ? curveEnd : -30; controlPoints = [ { x: startPoint.x + curveStart, y: startPoint.y }, { x: endPoint.x + curveEnd, y: endPoint.y }, ]; } return controlPoints; }, getPath(points) { const path = []; path.push(['M', points[0].x, points[0].y]); path.push([ 'C', points[1].x, points[1].y, points[2].x, points[2].y, points[3].x, points[3].y, ]); return path; }, }, 'single-line', ); }; registerFn(); const { data } = props; let graph = null; const initGraph = (data) => { if (!data) { return; } const { onInit, config } = props; const tooltip = new G6.Tooltip({ // offsetX和offsetY包含父容器的内边距 offsetX: 20, offsetY: 30, // 允许工具提示显示的项目类型 // 允许出现 tooltip 的 item 类型 itemTypes: ['node'], // 自定义提示条的内容 // 自定义 tooltip 内容 getContent: (e) => { const outDiv = document.createElement('div'); //outDiv.style.padding = '0px 0px 20px 0px'; const nodeName = e.item.getModel().name; let formatedNodeName = ''; for (let i = 0; i < nodeName.length; i++) { formatedNodeName = `${formatedNodeName}${nodeName[i]}`; if (i !== 0 && i % 20 === 0) formatedNodeName = `${formatedNodeName}
`; } outDiv.innerHTML = `${formatedNodeName}`; return outDiv; }, shouldBegin: (e) => { if (e.target.get('name') === 'name-shape' || e.target.get('name') === 'mask-label-shape') return true; return false; }, }); graph = new G6.TreeGraph({ container: 'container', ...defaultConfig, ...config, plugins: [tooltip], }); if (typeof onInit === 'function') { onInit(graph); } graph.data(data); graph.render(); const handleCollapse = (e) => { const target = e.target; const id = target.get('modelId'); const item = graph.findById(id); const nodeModel = item.getModel(); nodeModel.collapsed = !nodeModel.collapsed; graph.layout(); graph.setItemState(item, 'collapse', nodeModel.collapsed); }; graph.on('collapse-text:click', (e) => { handleCollapse(e); }); graph.on('collapse-back:click', (e) => { handleCollapse(e); }); }; initGraph(data); if (typeof window !== 'undefined') window.onresize = () => { console.log(container.scrollWidth, container.scrollHeight) if (!graph || graph.get('destroyed')) return; if (!container || !container.scrollWidth || !container.scrollHeight) return; graph.changeSize(container.scrollWidth, container.scrollHeight); }; } } }; </script> <style lang="scss" scoped> .atlasDome { width: 1920px; height: 1080px; display: flex; align-items: center; justify-content: center; background-color: #03132F; } .container { width: 1000px; height: 800px; background-color: #ffffff; } </style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
- 426
- 427
- 428
- 429
- 430
- 431
- 432
- 433
- 434
- 435
- 436
- 437
- 438
- 439
- 440
- 441
- 442
- 443
- 444
- 445
- 446
- 447
- 448
- 449
- 450
- 451
- 452
- 453
- 454
- 455
- 456
- 457
- 458
- 459
- 460
- 461
- 462
- 463
- 464
- 465
- 466
- 467
- 468
- 469
- 470
- 471
- 472
- 473
- 474
- 475
- 476
- 477
- 478
- 479
- 480
- 481
- 482
- 483
- 484
- 485
- 486
- 487
- 488
- 489
- 490
- 491
- 492
- 493
- 494
- 495
- 496
- 497
- 498
- 499
- 500
- 501
- 502
- 503
- 504
- 505
- 506
- 507
- 508
- 509
- 510
- 511
- 512
- 513
- 514
- 515
- 516
- 517
- 518
- 519
- 520
- 521
- 522
- 523
- 524
- 525
- 526
- 527
- 528
- 529
- 530
- 531
- 532
- 533
- 534
- 535
- 536
- 537
- 538
- 539
- 540
- 541
- 542
- 543
- 544
- 545
- 546
- 547
- 548
- 549
- 550
- 551
- 552
- 553
- 554
- 555
- 556
- 557
- 558
- 559
- 560
- 561
- 562
- 563
- 564
- 565
- 566
- 567
- 568
- 569
- 570
- 571
- 572
- 573
- 574
- 575
- 576
- 577
- 578
- 579
- 580
- 581
- 582
- 583
- 584
- 585
- 586
- 587
- 588
- 589
- 590
- 591
- 592
- 593
- 594
- 595
- 596
- 597
- 598
- 599
- 600
- 601
- 602
- 603
- 604
- 605
- 606
- 607
- 608
- 609
- 610
- 611
- 612
- 613
- 614
- 615
- 616
- 617
- 618
- 619
- 620
- 621
- 622
- 623
- 624
- 625
3. 设置流动线，链接线上自定义一个运动的小球
1. 官网dome地址
https://g6.antv.antgroup.com/zh/examples/scatter/edge/#edge
2. 结合官网修改代码
// 使用额外的矩形自定义边缘 G6.registerEdge( 'extra-shape-edge', { afterDraw(cfg, group) { // 获取图形组中的第一个图形，在这里就是边的路径图形 const shape = group.get('children')[0]; // 获取路径上的0.25位点坐标 // 在该点上放置一个圆形 const quatile = shape.getPoint(0.25); const quatileColor = cfg.quatileColor || '#9cdff1';//这里可以在数据中设置，来动态更新颜色 const circle = group.addShape('circle', { attrs: { r: 3, fill: quatileColor || '#9cdff1', x: quatile.x, y: quatile.y, }, }); circle.animate( (ratio) => { ratio ; const tmpPoint = shape.getPoint(ratio); return { x: tmpPoint.x, y: tmpPoint.y, }; }, { repeat: true, // 是否重复执行动画 duration: 2000, // the duration for executing once }, ); let index = 0; // 定义动画逻辑 shape.animate( () => { index -= 0.8; if (index > 55) { index = 0; } // 设置线型和线型偏移量 const res = { lineDash:[4, 2, 1, 2], // 设置虚线的实际线段长度和间隔长度 lineDashOffset: -index, // 设置虚线的偏移量 }; // 返回修改后的配置，包括线型和线型偏移量 return res; }, { repeat: true, // 是否循环执行动画 duration: 5000,// 单次动画执行的时间 }, ); }, update: undefined, }, 'cubic', );- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
3. 运行后样式
屏幕录制2023-09-11 14.03.38
4 . 更新图谱
要把graph设置成全局变量或者放在this上
<button @click="update"> 更新图谱</button> // 更新图谱 update() { // graph是Graph的实例 graph.changeData(this.mockData); // 若不指定该参数，则使用当前图上的数据重新渲染 graph.changeData(); // 根据提供的数据渲染视图。 graph.render(); }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
5. 支点跟随–聚焦一个节点
1. 官网地址
https://g6.antv.antgroup.com/zh/examples/interaction/position/#moveAnimate
2. graph.render();后添加聚焦节点代码
function handleNodeClick(event) { const item = event.item; // animately move the graph to focus on the item. // the second parameter controlls whether move with animation, the third parameter is the animate configuration graph.focusItem(item, true, { easing: 'easeCubic', duration: 500, }); } // listen to the node click event graph.on('node:click', handleNodeClick);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
3. 运行后效果
聚焦节点
下篇地址----待更新
-
相关阅读:
复习背诵整理版
尚硅谷Vue系列教程学习笔记（1）
JavaScript中的浅拷贝和深拷贝
YOLOV2详解
python 基础练习题
【C语言数据结构】队列-顺序存储(顺序队列)
SpringBoot自定义注解+异步+观察者模式实现业务日志保存
解决maven依赖冲突，这篇就够了！
Kubesphere中DevOps流水线无法部署/部署失败
pycharm联合Anaconda
- 原文地址：https://blog.csdn.net/men_gqi/article/details/136342280