可视化—AntV G6实现节点连线及展开收缩分组

这篇具有很好参考价值的文章主要介绍了可视化—AntV G6实现节点连线及展开收缩分组。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

AntV 是蚂蚁金服全新一代数据可视化解决方案,主要包含数据驱动的高交互可视化图形语法G2,专注解决流程与关系分析的图表库 G6、适于对性能、体积、扩展性要求严苛的场景。

demo使用数字模拟真实的节点及分组数据。combo内的nodes亦是使用随机数生成,节点之前的连线edges由节点从小到大依次连接 ,大家在用的时候,可以注意一下连线对象的 sourcetarget 两个属性即可

安装模块依赖 :npm install @antv/g6

main.js 中引入,并绑定Vue原型方法

import G6 from '@antv/g6';
import Vue from 'vue';

Vue.prototype.G6 = G6;

创建Graph.vue

<template>
  <div>
    <div id="drawGraph"></div>
  </div>
</template>

<script>
let graphG = null
export default {
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      let combos = [
        { id: '100-600', label: '100-600', type: 'root' },
        { id: '100-200', label: '100-200' },
        { id: '200-300', label: '200-300' },
        { id: '300-400', label: '300-400' },
        { id: '400-500', label: '400-500' },
        { id: '500-600', label: '500-600' },
      ]
      let edges = [
        { source: '100-200', target: '100-600' },
        { source: '200-300', target: '100-600' },
        { source: '300-400', target: '100-600' },
        { source: '400-500', target: '100-600' },
        { source: '500-600', target: '100-600' },
      ]
      let data = { combos, edges }
      this.makeRelationData(data);
    },
    // 分组 点 连线处理
    makeRelationData(data) {
      if (graphG) {
        graphG.destroy();
      }
      let drawGraph = document.getElementById("drawGraph");
      this.graphWidth = drawGraph.scrollWidth;
      this.graphHeight = drawGraph.scrollHeight || 1200;
      let origin = [this.graphWidth / 2, 100];
      let row = 150, clo = 180;
      let combos = data.combos
      let row_clo = Math.floor(Math.sqrt(combos.length));
      for (let i = 0; i < combos.length; i++) {
        let rowindex = Math.floor(i / row_clo) + 1;
        let cloindex = (i % row_clo) + 1;
        // 分组默认样式设置
        if (combos[i].type === 'root') {
          combos[i].x = this.graphWidth / 3
          combos[i].y = this.graphHeight / 3
          combos[i].style = {
            fill: "#B19693",
            opacity: 0.4,
            cursor: "pointer",
          };
        } else {
          // 分组定位
          combos[i].x = origin[0] + clo * cloindex;
          combos[i].y = origin[1] + row * rowindex;
          if (i % 2 === 1) {
            combos[i].y += 40;
          }
          combos[i].style = {
            fill: "#FAD069",
            opacity: 0.5,
            cursor: "pointer",
          }
        }
      }
      this.drawQfast(data)
    },
    drawQfast(data) {
      graphG = new this.G6.Graph({
        container: "drawGraph",
        width: this.graphWidth,
        height: this.graphHeight,
        groupByTypes: false,
        modes: {
          default: [
            { type: "zoom-canvas", enableOptimize: true, optimizeZoom: 0.2 },
            { type: "drag-canvas", enableOptimize: true },
            { type: "drag-node", enableOptimize: true, onlyChangeComboSize: true },
            { type: "drag-combo", enableOptimize: true, onlyChangeComboSize: true },
            { type: "brush-select", enableOptimize: true },
          ],
        },
        defaultEdge: {
          type: 'cubic-horizontal',
          lineWidth: 1,
          style: {
            endArrow: true,
            stroke: "#FAD069",
          },
        },
        edgeStateStyles: {
          hover: {
            lineWidth: 2,
          },
        },
        defaultNode: {
          type: "circle",
          size: 15,
          labelCfg: {
            position: "bottom",
            style: {
              fontSize: 15,
            },
          },
        },
        defaultCombo: {
          type: "circle",
          opacity: 0,
          lineWidth: 1,
          collapsed: true,
          labelCfg: {
            position: "top",
            refY: 5,
            style: {
              fontSize: 16,
            },
          },
        },
      });
      graphG.data(data);
      graphG.render(); // 渲染图
      graphG.zoom(0.8);  // 如果觉得节点大,可以缩放整个图
      graphG.on("edge:mouseenter", (e) => {
        graphG.setItemState(e.item, "hover", true);
      });

      graphG.on("edge:mouseleave", (e) => {
        graphG.setItemState(e.item, "hover", false);
      });

      graphG.on("combo:dblclick", (e) => {
        e.item._cfg.model.type = e.item._cfg.model.type === "rect" ? "circle" : "rect";  // 分组形状,方圆切换
        e.item._cfg.model.labelCfg.refY = e.item._cfg.model.type === "rect" ? -20 : 5;   // 切换形状,改变label定位

        const comboId = e.item._cfg.model.id
        graphG.collapseExpandCombo(comboId);

        // 分组收缩时,删除分组内的连线和节点
        if (e.item._cfg.model.collapsed) {   // 收缩 
          let newedges = e.item.getEdges();
          let newNodes = e.item.getNodes();
          for (let j = 0; j < newedges.length; j++) {
            graphG.removeItem(newedges[j]);
          }
          for (let i = 0; i < newNodes.length; i++) {
            graphG.removeItem(newNodes[i]);
          }
          data.edges.forEach(edge => {
            graphG.addItem("edge", edge);
          });
        } else {   // 展开
          // 分组展开时, 添加节点和连线,并给分组内的节点 添加位置信息
          let origin = [e.item._cfg.model.x, e.item._cfg.model.y];  // 获取当前分组combs的坐标
          let row = 110, clo = 150;
          // 生成(10-20)随机数个 随机数 模拟展开分组内的节点
          let randomCount = Math.floor(Math.random() * 10) + 10;
          let row_clo = Math.floor(Math.sqrt(randomCount));
          let nodes = []
          for (let i = 0; i < randomCount; i++) {
            let min = comboId.split('-')[0] - 0
            let max = comboId.split('-')[1] - 0
            let randomNum = Math.floor(Math.random() * (max - min)) + min;
            if (nodes.indexOf(randomNum) > -1) {
              i--
              continue;
            }
            nodes.push(randomNum)
            let rowindex = Math.floor(i / row_clo);
            let cloindex = i % row_clo;
            let y = origin[1] + row * rowindex
            let node = {
              label: randomNum,
              id: randomNum.toString(),
              comboId: comboId,
              style: {
                fillOpacity: 0.5,
                cursor: "pointer",
                fill: randomNum % 5 == 0 ? "#81C7D4" : "#986DB2"
              },
              x: origin[0] + clo * cloindex,
              y: i % 2 == 0 ? y + 40 : y
            }
            graphG.addItem("node", node); // 将节点添加至分组 
          }     
          nodes.sort((a, b) => a - b)  // 将分组内的数字排序,从小到大依次连接,模拟真实数据
          for (let i = 0; i < nodes.length - 1; i++) {
            let edge = {
              source: nodes[i].toString(),
              target: nodes[i + 1].toString(),
              lineWidth: 1,
              style: {
                lineDash: [2, 2],
                lineWidth: 0.5,
                stroke: "#00AA90"
              }
            }
            graphG.addItem("edge", edge);  // 添加连线   将分组内的数字排序,从小到大依次连接
          }
        }
      });
    },
  }
};
</script>

收缩图:

g6的关系图的展开收起功能懒加载的形式,Vue2,JS,可视化,vue.js,信息可视化,javascript,ecmascript,前端

展开图:

g6的关系图的展开收起功能懒加载的形式,Vue2,JS,可视化,vue.js,信息可视化,javascript,ecmascript,前端文章来源地址https://www.toymoban.com/news/detail-602241.html

到了这里,关于可视化—AntV G6实现节点连线及展开收缩分组的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 移动端和PC端对比【组件库+调试vconsole +构建vite/webpack+可视化echarts/antv】

    目录 移动端 antv f2 版本问题 jsx 经典配置 自动配置 vue 使用 bar  radar PC端 antv antv G6 Vue2 scss Echarts Vue3 radar React 原生echarts+TS ListChart(列表切换echarts图表,同类数据为x轴的bar) ListChart.tsx ListChart.css ListChartUtil.tsx Recharts​​​​​​​ D3 体量:Echarts支持 按需引用 灵活度:EC

    2024年02月11日
    浏览(51)
  • PyG基于Node2Vec实现节点分类及其可视化

    大家好,我是阿光。 本专栏整理了《图神经网络代码实战》,内包含了不同图神经网络的相关代码实现(PyG以及自实现),理论与实践相结合,如GCN、GAT、GraphSAGE等经典图网络,每一个代码实例都附带有完整的代码。 正在更新中~ ✨ 🚨 我的项目环境: 平台:Windows10 语言环

    2024年02月02日
    浏览(54)
  • 2023物联网新动向:WEB组态除了用于数据展示,也支持搭建业务逻辑,提供与蓝图连线和NodeRed规则链类似的可视化编程能力

    前言 组态编辑在工业控制、物联网场景中十分常见,越来越多的物联网平台也把组态作为一项标配功能。 物联网产业链自下往上由“端 - 边 - 管 - 云 -用”多个环节构成,组态通常是用于搭建数据展示类型的应用,而随着系统集成度越来越高,项目中对应用的业务逻辑的要求

    2024年02月10日
    浏览(38)
  • vue 复杂的流程图实现--antv/g6

    可以先看下对应的文档:G6 Demos - AntV  npm install --save @antv/g6 实现如图:  

    2024年02月08日
    浏览(48)
  • 区块链网络管理平台WeBASE双节点可视化部署

    之前有写过一篇Linux下一键部署区块链网络WeBASE(FISCO BCOS),是单节点,正常还是会考虑多部署几个节点的,这里进行一个管理节点,2个底层节点的部署操作,采用官网的可视化部署方式。 官网参考:https://webasedoc.readthedocs.io/zh_CN/latest/docs/WeBASE-Install/visual_deploy.html 可视化部

    2023年04月08日
    浏览(43)
  • 【复杂网络建模】——Python可视化重要节点识别(PageRank算法)

    🤵‍♂️ 个人主页:@Lingxw_w的个人主页 ✍🏻作者简介:计算机科学与技术研究生在读 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞👍🏻 收藏 📂加关注+ 目录 一、复杂网络建模 二、建模的算法

    2024年02月06日
    浏览(46)
  • Unity 可视化节点编辑器(GraphView、编辑器扩展)

      前几天把导师的项目打包发布交了一稿,这半个星期除了再把项目缝缝补补外(说实话项目做到后边实在有些无聊,都是些琐碎的东西而且自己也学不到什么,纯粹是 浪费 消磨时间)无聊逛Unity商店发现了个有意思的东西,说实话一开始我以为只是单纯绘制的2D动画:

    2024年02月12日
    浏览(59)
  • [Unity] GraphView 可视化节点的事件行为树(三) GraphView介绍

    目录 前言 GraphView的节点(Node)和端口(Port) GraphView的边(Edge) 关联Inspector窗口,显示数据 增加节点操作 构建节点图 删除与修改节点操作 创建节点的新建菜单栏 GraphView 复制粘贴操作实现         前置章节: [Unity] 使用GraphView实现一个可视化节点的事件行为树系统(序章/Gith

    2023年04月27日
    浏览(39)
  • [Unity] GraphView 可视化节点的事件行为树(一) Runtime Node

            这个框架最近自己终于补充完成了,使用文档和源码已经放在了Github上,可以在之前的文章中找到: [Unity] 使用GraphView实现一个可视化节点的事件行为树系统(序章/Github下载)_Sugarzo的博客-CSDN博客_unity graphview                  本文将开始介绍Runtime部分的

    2024年02月07日
    浏览(33)
  • Unity可视化Shader工具ASE介绍——6、通过例子说明ASE节点的连接方式

    阿赵的Unity可视化Shader工具ASE介绍目录   大家好,我是阿赵。继续介绍Unity可视化Shader编辑插件ASE的用法。上一篇已经介绍了很多ASE常用的节点。这一篇通过几个小例子,来看看这些节点是怎样连接使用的。   这篇的内容可能会比较长,最终是做了一个遮挡X光的效果,不

    2024年02月07日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包