G6-定制不同节点的参数 --组合图

最新推荐文章于 2024-09-20 09:56:49 发布
最新推荐文章于 2024-09-20 09:56:49 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： G6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45158253/article/details/119676611
版权
本文介绍了如何使用 G6 图形库在 Angular 应用中创建具有动画效果的图表，包括边动画、节点拖拽、缩放和平移交互。示例代码展示了自定义边类型 'circle-running' 的实现，通过添加小球沿边移动的动画。此外，还讨论了图的适配问题，即图无法随屏幕尺寸变化自动调整大小。
摘要由CSDN通过智能技术生成

前言

G6官方地址：https://antv-g6.gitee.io/zh/examples/gallery

参考的G6案例有： 图表决策、边动画、定制不同节点的参数

实现的效果：动画、放大、缩小、拖拽、移动、点击交互等

有两版代码：一个是可以在G6官网里运行的。一个是在angular里运行的

我暂时未处理的问题：图的适配问题，不能随着屏幕大小变化而变化

请添加图片描述
变形
在这里插入图片描述
改变连接节点就行

代码

可直接在官网上运行的代码：
ps：随便找一个案例，替换掉里面的代码就行

import G6 from '@antv/g6';

G6.registerEdge(
  'circle-running',
  {
    afterDraw(cfg, group) {
      // 得到组中的第一个形状，它是边的路径在这里
      const shape = group.get('children')[0];
      // 边缘路径的起始位置
      const startPoint = shape.getPoint(0);

      // 添加一个在线上运动的圆球
      const circle = group.addShape('circle', {
        attrs: {
          x: startPoint.x,
          y: startPoint.y,
          fill: '#1890ff',
          r: 3,
        },
        name: 'circle-shape',
      });

      // 小球的动画
      circle.animate(
        (ratio) => {
          // 每个帧的操作。比率范围从0到1，表示动画的进度。返回修改后的配置
          // 根据比例得到边缘的位置
          const tmpPoint = shape.getPoint(ratio);
          // 这里返回修改后的配置，这里是x和y
          return {
            x: tmpPoint.x,
            y: tmpPoint.y,
          };
        },
        {
          repeat: true, // 是否重复执行动画
          duration: 3000, // 执行一次的持续时间
        },
      );
    },
  },
  'line', // 扩展内置边'cubic'
);

const lightColors = [
  '#8FE9FF',
  '#87EAEF',
  '#FFC9E3',
  '#A7C2FF',
  '#FFA1E3',
  '#FFE269',
  '#BFCFEE',
  '#FFA0C5',
  '#D5FF86',
];
const darkColors = [
  '#7DA8FF',
  '#44E6C1',
  '#FF68A7',
  '#7F86FF',
  '#AE6CFF',
  '#FF5A34',
  '#5D7092',
  '#FF6565',
  '#6BFFDE',
];
const uLightColors = [
  '#CFF6FF',
  '#BCFCFF',
  '#FFECF5',
  '#ECFBFF',
  '#EAD9FF',
  '#FFF8DA',
  '#DCE2EE',
  '#FFE7F0',
  '#EEFFCE',
];
const uDarkColors = [
  '#CADBFF',
  '#A9FFEB',
  '#FFC4DD',
  '#CACDFF',
  '#FFD4F2',
  '#FFD3C9',
  '#EBF2FF',
  '#FFCBCB',
  '#CAFFF3',
];

const gColors = [];
const unlightColorMap = new Map();


const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  defaultEdge: {
    type: 'circle-running',
    style: {
      lineWidth: 2,
      stroke: '#bae7ff',
    },
  },
  defaultNode: {
    type: 'circle', // 'bubble'
    size: 95,
    labelCfg: {
      position: 'center',
      style: {
        fill: 'white',
        fontStyle: 'bold',
      },
    },
  },
  animate: true,
  layout: {
    type: 'force',
    preventOverlap: true,
    linkDistance: (d) => {
      if (d.source.id === 'node0') {
        return 200;
      }
      return 30;
    },
    nodeStrength: (d) => {
      if (d.isLeaf) {
        return -200;
      }
      return -100;
    },
  },
  defaultNode: {
    color: '#5B8FF9',
  },
  // 整个图可以拖动、放大缩小
    modes: {
      default: ['drag-canvas', 'zoom-canvas'],
    },
});

const data = {
  nodes: [
     { id: 'node0', label: `组织管理\n(12)`, size: 100 },
        { id: 'node1', label: '管理单位', size: 100 },
        { id: 'node2', label: '角色管理', size: 100 },
        { id: 'node3', label: '岗位管理', size: 100 },
        { id: 'node4', label: '岗位管理', size: 100 },
        { id: 'node5', label: '岗位管理', size: 100 },
  ],
  edges: [
   { source: 'node0', target: 'node1' },
        { source: 'node0', target: 'node2' },
        { source: 'node0', target: 'node3' },
        { source: 'node0', target: 'node4' },
        { source: 'node0', target: 'node5' },
  ],
};

lightColors.forEach((lcolor, i) => {
  gColors.push('l(0) 0:' + lcolor + ' 1:' + darkColors[i]);
  unlightColorMap.set(gColors[i], 'l(0) 0:' + uLightColors[i] + ' 1:' + uDarkColors[i]);
});
console.log(gColors);

for ( let i = 0; i < data.nodes.length; i++ ) {
  data.nodes[i].color = gColors[i];
  data.nodes[i].style = {
    fill: gColors[i],
    lineWidth: 0
  };
  data.nodes[i].labelCfg = {
    style: {
      fontSize: 20,
      fill: '#fff',
      fontWeight: 300,
    },
  };
}



const nodes = data.nodes;
graph.data({
  nodes,
  edges: data.edges.map(function (edge, i) {
    edge.id = 'edge' + i;
    return Object.assign({}, edge);
  }),
});
graph.render();

graph.on('node:dragstart', function (e) {
  graph.layout();
  refreshDragedNodePosition(e);
});
graph.on('node:drag', function (e) {
  refreshDragedNodePosition(e);
});
graph.on('node:dragend', function (e) {
  e.item.get('model').fx = null;
  e.item.get('model').fy = null;
});
graph.on('node:click', (evt) => {
    window.alert('点击了');
  });

if (typeof window !== 'undefined')
  window.onresize = () => {
    if (!graph || graph.get('destroyed')) return;
    if (!container || !container.scrollWidth || !container.scrollHeight) return;
    graph.changeSize(container.scrollWidth, container.scrollHeight);
  };

function refreshDragedNodePosition(e) {
  const model = e.item.get('model');
  model.fx = e.x;
  model.fy = e.y;
}

我的代码

我是在angular11里使用的G6

<div #mountNodeLeft></div>

import { Component, OnInit, ViewChild } from '@angular/core';




@ViewChild('mountNodeLeft', { static: false }) mountNodeLeft!: any;
 constructor() { }

  ngOnInit(): void {
  }

  // tslint:disable-next-line:use-lifecycle-interface
  ngAfterViewInit(): void {
    setTimeout(() => { this.render(); }, 100);
  }

  // 下面两个函数是g6的图
  // tslint:disable-next-line:typedef
  render() {
    const lightColors = [
      '#8FE9FF',
      '#87EAEF',
      '#FFC9E3',
      '#A7C2FF',
      '#FFA1E3',
      '#FFE269',
      '#BFCFEE',
      '#FFA0C5',
      '#D5FF86',
    ];
    const darkColors = [
      '#7DA8FF',
      '#44E6C1',
      '#FF68A7',
      '#7F86FF',
      '#AE6CFF',
      '#FF5A34',
      '#5D7092',
      '#FF6565',
      '#6BFFDE',
    ];
    const uLightColors = [
      '#CFF6FF',
      '#BCFCFF',
      '#FFECF5',
      '#ECFBFF',
      '#EAD9FF',
      '#FFF8DA',
      '#DCE2EE',
      '#FFE7F0',
      '#EEFFCE',
    ];
    const uDarkColors = [
      '#CADBFF',
      '#A9FFEB',
      '#FFC4DD',
      '#CACDFF',
      '#FFD4F2',
      '#FFD3C9',
      '#EBF2FF',
      '#FFCBCB',
      '#CAFFF3',
    ];

    const gColors: any = [];
    const unlightColorMap = new Map();
    lightColors.forEach((lcolor, i) => {
      gColors.push('l(0) 0:' + lcolor + ' 1:' + darkColors[i]);
      unlightColorMap.set(gColors[i], 'l(0) 0:' + uLightColors[i] + ' 1:' + uDarkColors[i]);
    });

    G6.registerEdge(
      'circle-running',
      {
        // tslint:disable-next-line:typedef
        afterDraw(cfg, group: any) {
          // 得到组中的第一个形状，它是边的路径在这里
          const shape = group.get('children')[0];
          // 边缘路径的起始位置
          const startPoint = shape.getPoint(0);

          // 添加一个在线上运动的圆球
          const circle = group.addShape('circle', {
            attrs: {
              x: startPoint.x,
              y: startPoint.y,
              fill: '#1890ff',
              r: 3,
            },
            name: 'circle-shape',
          });

          // 小球的动画
          circle.animate(
            (ratio: any) => {
              // 每个帧的操作。比率范围从0到1，表示动画的进度。返回修改后的配置
              // 根据比例得到边缘的位置
              const tmpPoint = shape.getPoint(ratio);
              // 这里返回修改后的配置，这里是x和y
              return {
                x: tmpPoint.x,
                y: tmpPoint.y,
              };
            },
            {
              repeat: true, // 是否重复执行动画
              duration: 3000, // 执行一次的持续时间
            },
          );
        },
      },
      'line', // 扩展内置边'cubic'
    );

    const width = window.innerWidth / 2;
    const height = window.innerHeight - 300;
    const graph = new G6.Graph({
      container: this.mountNodeLeft.nativeElement,
      width,
      height,
      // 改变线的颜色 绑定动画
      defaultEdge: {
        type: 'circle-running',
        style: {
          lineWidth: 2,
          stroke: '#bae7ff',
        },
      },
      layout: {
        type: 'force',
        preventOverlap: true,
        linkDistance: (d: any) => {
          // if (d.source.id === 'node0') {
            // return 200;
          // }
          // return 30;
          return 200;
        },
        // nodeStrength: (d: any) => {
          // if (d.isLeaf) {
            // return -200;
          // }
         // return -100;
        },
      },
      defaultNode: {
        color: '#5B8FF9',
      },
      // 整个图可以拖动、放大缩小
      modes: {
        default: ['drag-canvas', 'zoom-canvas'],
      },
    });

    const data: any = {
      nodes: [
        { id: 'node0', label: `组织管理\n(12)`, size: 110 },
        { id: 'node1', label: '管理单位', size: 110 },
        { id: 'node2', label: '角色管理', size: 110 },
        { id: 'node3', label: '岗位管理', size: 110 },
        { id: 'node4', label: '岗位管理', size: 110 },
        { id: 'node5', label: '岗位管理', size: 110 },
      ],
      edges: [
        { source: 'node0', target: 'node1' },
        { source: 'node0', target: 'node2' },
        { source: 'node0', target: 'node3' },
        { source: 'node0', target: 'node4' },
        { source: 'node0', target: 'node5' },
      ],
    };
    // 修改图中的圆
    for (let i = 0; i < data.nodes.length; i++) {
      data.nodes[i].color = gColors[i];
      data.nodes[i].style = {
        fill: gColors[i],
        lineWidth: 0,
        cursor: 'pointer',
      };
      data.nodes[i].labelCfg = {
        style: {
          fontSize: 18,
          fill: '#fff',
          fontWeight: 300,
          cursor: 'pointer',
        },
      };
    }
    const nodes = data.nodes;
    graph.data({
      nodes,
      edges: data.edges.map((edge: any, i: any) => {
        edge.id = 'edge' + i;
        return Object.assign({}, edge);
      }),
    });
    graph.render();

    graph.on('node:dragstart', (e) => {
      graph.layout();
      this.refreshDragedNodePosition(e);
    });
    graph.on('node:drag', (e) => {
      this.refreshDragedNodePosition(e);
    });
    graph.on('node:dragend', (e: any) => {
      e.item.get('model').fx = null;
      e.item.get('model').fy = null;
    });
    graph.on('node:click', (evt) => {
      window.alert('点击了');
    });

  }
  // tslint:disable-next-line:typedef
  refreshDragedNodePosition(e: any) {
    const model = e.item.get('model');
    model.fx = e.x;
    model.fy = e.y;
  }
蒲公英
关注
专栏目录
揭秘G6图表自定义的真相
大转转FE
01-06 3060
「福利」 ✿✿ ヽ(°▽°)ノ ✿：文章最后有抽奖，转转纪念T恤一件，走过路过不要错过，欢迎积极留言哦~序言 前一段时间，我们风控部门提出了一个“关联图谱”的需求，实现一个平台上人员关...
逻辑编排在优酷可视化搭建中的实践（二） - 编排器与业务
阿里文娱技术
11-04 1605
背景与价值 说到逻辑编排大家应该都不陌生了，目前我们集团有多面向后端的逻辑编排技术专项，且没有统一的标准、沉淀通用的方案。也有前端逻辑编排项目，但均面向前端开发提效的逻辑编排，而我们是要打造一个面向非研发人员，可让他们根据图形化组件搭建出逻辑的平台。 为什么要做这个呢，围绕我们团队的好莱坞搭建平台来说，随着页面可视化搭建的蓬勃发展，互动营销类的页面/组件需求日益增长，为了提高开发效率，研发侧不断地沉淀通用的基础库，与服务端商定标准化的接口，以此来减少维护成本，但现有的可视化搭建效率和研发效率都已经达到瓶颈了
G6 图可视化引擎——核心概念——节点/边/Combo——内置节点——内置节点总览
Alex
06-25 3736
G6 的内置节点包括 circle，rect，ellipse，diamond，triangle，star，image，modelRect。这些内置节点的默认样式分别如下图所示。 本文将概述 G6 中的各个内置节点类型、内置节点的通用属性、配置方法。 内置节点类型说明 下面表格中显示了内置的各类节点，同时对一些特殊的字段进行了说明： 名称描述默认示例circle圆形：- size 是单个数字，表示直径- 圆心位置对应节点的位置- color 字段默认在描边上生效- 标签文本默认在节点中央- 更多字段见 Ci
拓展阅读 —— G6 坐标系深度解析
Alex
07-11 2930
title: G6 坐标系深度解析 order: 0 在 G6 中，实例化图时指定 container 字段指定了画布 <Canvas></Canvas> 标签的父容器。而 DOM 的坐标与真正绘制图形时的坐标并不是同一套坐标系，这可能会使得如下场景中用户指定坐标时产生困惑： 在画布上放置一个 position: absolute 的 DOM 元素，如 tooltip、 menu 等时： 在鼠标点击画布上的位置放置； 鼠标点击节点时，在节点位置。 上面问题在 graph 缩放.
AntV/G6图-force力导向布局案例
最新发布
Miss_Y0的博客
09-20 736
/** * * Author: me * CreatDate: 2024-08-10 * * Description: G6 * */ <template> <div class="antvG6-wapper"> <div :id="idName" :ref="refName" class="graph-content"></div> </div> </template> <script> import G
最小生成树模板
一直努力
10-07 333
Kruskal算法模板 #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> using namespace std; struct node{ int x,y;//树一条边的起点和终点； int w;// 边权（边的价值或大小） }a[110]; int pre[110];//每个点的信息； 并查集所用； bool cmp(struct node a,struc
AntV G6节点长度的修改
笑到世界都狼狈的博客
12-24 5098
如下图所示，当我将节点修改成图片后，由于节点之间的连线太短，导致节点都挨的很近，看起来很丑。 最后在文档中找到了linkDistance属性，可以设置指定边的距离 主要代码： layout: { type: 'force', linkDistance: 150 // 指定边距离为150 }, 效果如下： 完整代码： <template> <div> <div id="container"></div> ..
antv G6 实践踩坑，插件，时间轴，撤销回退，修改样式
qq_40453669的博客
06-01 2314
总结： 多看案例，遇到图渲染不出来的，检查语法错误，控制台不一定会报错，找不出的话就回退代码，一次不要写太多的代码才看效果。时间轴的数据格式，节点中也需要增加date属性，并且需要和时间轴date格式相同，才能用内置的筛选功能，不同的时间轴类型需要的date格式不一样，仔细查看官方文。2. 撤销回退功能：只能使用官方提供的 new G6.ToolBar来编写撤销回退功能，自己写的话很麻烦，需要监听各类事件，如果需要自定义工具栏，可以将工具栏覆盖在自定义的工具栏上。内置的方法更换不了图片，需要自定义，在。
蚂蚁金服G6 API详解：图形与布局
"蚂蚁金服 G6 API 文档提供了关于 G6 图形库的详细信息，包括 ...开发者可以根据自身项目的需求，灵活组合和扩展 G6 的功能，实现定制化的图形可视化。同时，文档中的示例代码和详细解释有助于理解和应用这些功能。
Web的图形可视化：G6库的设计与实现
视觉信息学5（2021）49G6：一个基于Web的图形可视化王艳艳a，白占宁a，林志峰a，董晓青b，冯颖超杰c，潘嘉成，陈伟，陈a蚂蚁集团，中国b中国阿里巴巴集团c浙江大学CAD CG国家重点实验室，浙江省杭州市ar t i cl e i ...
解密国内BAT等大厂前端技术体系-阿里篇（长文建议收藏）
m0_37411791的博客
10-16 1853
进入2019年，大前端技术生态似乎进入到了一个相对稳定的环境，React在2013年发布至今已经6年时间了，Vue 1.0在2015年发布，至今也有4年时间了。整个业界在...
G6图可视化引擎 v4.8.21.zip
03-21
G6图可视化引擎 v4.8.21.zip
G6尝试 学习
csstmg的博客
07-28 656
代码】G6尝试学习。
核心概念——节点分组 Combo
Alex
07-14 3241
title: 节点分组 Combo order: 8 V3.5 后支持的全新节点分组 Combo 机制。原节点分组仍可使用。 对于熟悉图可视化类库的用户来说，节点分组是非常实用的一个功能。此前，G6 已经存在一个节点分组 Node Group 功能，但它的机制无法支持一些较复杂的功能，例如：带有节点分组的图布局、自定义 Combo、嵌套节点分组的均匀 padding、节点与分组的边、分组与分组的边、空的节点分组等。V3.5 推出了全新的节点分组 Combo 机制，能够支持所有常用功能，参考 Demo。.
antvG6,拖拽节点不生效解决办法
weixin_38345306的博客
05-12 1966
antvG6,拖拽节点不生效解决办法
antv/g6使用教程及图配置
study_way的博客
10-30 3917
G6 是一款由蚂蚁金服 AntV 团队开发的 JavaScript 图形引擎，用于构建各种交互式可视化图形，包括但不限于图表、网络拓扑图、关系图、流程图等。无论是数据分析、决策支持，还是信息可视化，G6 都是一个强大的工具。丰富的图形元素支持：G6 支持多种图形元素，包括节点、边、群组、标签等，这些元素可以被自定义和样式化，以创建各种类型的图形。交互性：G6 可以实现各种交互功能，如缩放、平移、拖拽、连线、节点拖拽等，以提供丰富的用户体验。自动布局。
个推图可视化应用实践
个推技术学院
07-01 5592
个推资深前端开发专家 东风 图可视化应用是数据可视化的一个重要组成部分。图指的是知识图谱（Knowledge Graph），此概念于2012年由Google正式提出，旨在帮助Google优化搜索引擎返回的结果，提升用户搜索质量及体验。 个推作为专业的数据智能服务商，在图可视化应用方面也进行了丰富的实践。本文将从四部分讲述图可视化应用：应用场景、组成部分、个推图可视化组件、个推图可视化展望。 （文末附视频版讲解及完整资料下载） 01 图可视化应用场景 ...
vue2中实现Antv g6 流程图 以及自定义节点
qq_61461409的博客
03-15 5542
vue2中实现Antv g6 流程图以及自定义节点
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值