• 2024-09-14vue2 antv x6 入门 (一)画布、节点、边
    安装#npmnpminstall@antv/x6--save#yarnyarnadd@antv/x6 1.初始化画布<divid="container"></div>import{Graph}from'@antv/x6'constgraph=newGraph({container:document.getElementById('container'
  • 2024-09-03vue3整合antv x6实现图编辑器快速入门
    安装:npminstall@antv/x6--save如果使用umd包,可以使用下面三个CDN中的任何一个,默认使用X6的最新版:https://unpkg.com/@antv/x6/dist/index.jshttps://cdn.jsdelivr.net/npm/@antv/x6/dist/index.jshttps://cdnjs.cloudflare.com/ajax/libs/antv-x6/2.0.0/index.
  • 2024-08-14这次轮到AntV增强Awesome-Graphs
    前不久,Awesome-Graphs刚Release完1.1.0版本后,我在《从论文到图谱,或许只差一个html》一文中,向大家详细展示了Awesome-Graphs的产品能力与交互形态。版本一经发布,作为蚂蚁数据可视化解决方案(AntV)一号位的志伟老哥,看到项目还在使用vis.js组件库,直接“按耐不住”地要给项目提供AntVG
  • 2024-07-17Axure引用Antv-G2
    本文分为5个模块:引用模版、说明---引用模版、说明---antv-g2图表示例代码、axure引用步骤、示例代码引用模版:javascript:varscript=document.createElement('script');script.type="text/javascript";script.src="https://unpkg.com/@antv/g2/dist/g2.min.js";document.he
  • 2024-07-11AntV X6 图编辑引擎速通
    前言:参考[AntVX6官网](https://x6.antv.antgroup.com/)一、简介X6可以快速搭建DAG图、ER图、流程图、血缘图等应用。二、快速上手1.安装npminstall@antv/x6--save#oryarnadd@antv/x6#orpnpmadd@antv/x62.使用2.1初始画布在页面中创建一个画
  • 2024-06-03antV x6 禁止拖拽出新的线,鼠标滑过线设置高亮
    antVx6中的ER图; 代码如下://鼠标滑过事件graph.on('edge:mouseenter',({cell})=>{cell.removeTools()cell.attr('line',{stroke:'blue',strokeWidth:2})cell.zIndex=0})//鼠标滑出事件graph.o
  • 2024-06-03「AntV」X6 自定义vue节点(vue3)
    官方文档本篇文档只讲解vue3中如何使用,vue2的可以参考下官方文档安装插件@antv/x6-vue-shape添加vue组件既然使用vue节点,那么我们就需要准备一个vue的组件,这个组件就是节点的一些样式,根据你们的ui自行写代码即可<template><div>节点名称</div><div>节点描述</div>
  • 2024-04-09antv下拉框展开选项到刚好到浏览器底部触发闪烁,会回弹一下
    关闭下拉框的动画样式.ant-select-dropdown.slide-up-appear.slide-up-appear-active.ant-select-dropdown-placement-bottomLeft,.ant-select-dropdown.slide-up-enter.slide-up-enter-active.ant-select-dropdown-placement-bottomLeft{ -webkit-animation-name:unset;
  • 2024-01-05【可视化库对比】ECharts、AntV、D3和Three
    本文写作目的:大家在使用可视化库创作可视化作品的时候,可能会产生这样的问题:“现如今成熟的可视化库有这么多,我到底该选择哪一个呢?”这其实也是我在学习数据可视化课程的时候面临的一个问题。因此本文旨在对比上述广泛被使用到的4个前端可视化库:Echart、AntV、D3和Three,了解它们的
  • 2023-11-14vue3 AntV-X6 引入插件报错
    vue3AntV-X6引入插件报错:UncaughtTypeError:Cannotreadpropertiesofundefined(reading'ToolItem')vite引入路径的问题解决就是在引入插件的路径后面加上/lib:import{Keyboard}from'@antv/x6-plugin-keyboard/lib'直接写 import{Keyboard}from'@antv/
  • 2023-09-20vuejs+antv-g6绘制图表
    该内容包括antv-g6官网地址、antv-g6的基本使用(包括自定义节点、常用插件(右键菜单等)、基本事件、目前我所遇到的一些需求)。1、antv-g6的官网地址:https://g6.antv.antgroup.com/examples2、安装antv-g6组件npminstall@antv/g6 3、创建antvView.vue文件使用antv/g6
  • 2023-08-31g2条形图填充色设置渐变色
    g2条形图填充色设置渐变色为了方便可以直接访问github链接https://github.com/antvis/G2/discussions/5486在antv/g24.*版本在4.*版本是不支持设置fill属性为linear-gradient(-90deg,white0%,darkgreen100%)设置完会是黑色,正确做法如下://举个
  • 2023-08-22「AntV」x6 框选添加右键菜单
    今天在群里有个小伙伴提出了这么个问题:如何在框选完成后给框选的区域添加一个右键菜单的功能,我看到了这个问题后也是有点懵,心里想着怎么还有这个需求,直接快捷键删除不是更好吗,谁知这位小伙伴也是这么写的,奈何客户要添加右键菜单的功能,所以说,客户最大。既然人家都提出这个需求呢,那
  • 2023-06-11「AntV」景点轨迹数据获取与L7可视化
    1.引言L7地理空间数据可视分析引擎是一种基于WebGL技术的地理空间数据可视化引擎,可以用于实现各种地理空间数据可视化应用。L7引擎支持多种数据源和数据格式,包括GeoJSON、CSV等,可以快速加载和渲染大规模地理空间数据。L7引擎还提供了丰富的可视化效果和交互功能,包括热力图
  • 2023-06-10「AntV」路网数据获取与L7可视化
    1.引言L7地理空间数据可视分析引擎是一种基于WebGL技术的地理空间数据可视化引擎,可以用于实现各种地理空间数据可视化应用。L7引擎支持多种数据源和数据格式,包括GeoJSON、CSV等,可以快速加载和渲染大规模地理空间数据。L7引擎还提供了丰富的可视化效果和交互功能,包括热力图
  • 2023-05-30AntV L7 快速入门示例
    1.引言L7地理空间数据可视分析引擎是一种基于WebGL技术的地理空间数据可视化引擎,可以用于实现各种地理空间数据可视化应用。L7引擎支持多种数据源和数据格式,包括GeoJSON、CSV等,可以快速加载和渲染大规模地理空间数据。L7引擎还提供了丰富的可视化效果和交互功能,包括热力图
  • 2023-05-10AntV
    AntV入门接触背景今天是写着大论文的日子。吃饭的时候突然看到B站体验科技发了新的视频,是个好看的小姐姐——缨缨的自传,其为S2的负责人,那也正好借此机会入门AntV。简单说一下AVA产品矩阵:常规数据统计:G2-G2Plot、S2关系数据:G6-Graphin、X6-XFLOW地理空间数据:L7-L7Plot
  • 2023-04-27antv x6 神奇的图片边框
    昨天才把html节点中的图片转成base格式的,今天就发现一个用户体验的问题;那么是啥呢?就是我从左侧的树形菜单中拖拽节点的时候(鼠标按下也是同样问题),发现节点的图片区域那里会出现一个边框,持续时间不是很长,就几毫秒的时间,但是当你连续拖拽几个不同节点的时候就会发现这个边框竟然又消
  • 2023-04-04antd modal弹出框,渲染antv图表
    弹出框的图标渲染获取不到dom,所以不能直接渲染,需要先判断Modal弹出框dom节点加载完成后,才能开始渲染。。。。。快下班了,直接上全部代码,不解释了<template><a-modalv-model:visible="visible":destroyOnClose="true"title="评估全景"@ok="cancel"@ca
  • 2023-03-31vue2中使用antv/G6节点内容可滚动的ER图
    先举一个栗子: 如果不会请移步到官网的栗子,请点击查看狠人话不多,直接给大家上代码:整体代码片段<template><divid="container"style="position:relative;"></div></template><script>/*eslint-disable*/importG6from"@antv/g6";i
  • 2023-02-27Antv/G6 画布自适应
    mounted(){window.addEventListener('resize',this.handleResize)}//画布尺寸适配handleResize(){if(!this.graph||this.graph.ge
  • 2023-01-05antv/g2图形横坐标文字斜着展示
    this.chart.axis('x',{label:{offset:30,//设置坐标轴文本label距离坐标轴线的距离textStyle:{textAlign:'center',//文本对齐方向,可取值为:startmiddle
  • 2023-01-04antv G6 脑图设计
    首先是要安装antvG6插件安装命令:npminstall--save@antv/g6 Vue页面开发:<template><divid="container"></div></template><scriptlang="tsx"setup>
  • 2022-12-30antv g6 4.7版本
    antv4.8文档设置可缩放拖动画布letgraph=newG6.Graph({modes:{//拖拽画布缩放画布default:['drag-canvas','zoom-canvas']}
  • 2022-12-29antv/g2 图形tooltip提示
    this.chart.tooltip({showTitle:true,ÏshowMarkers:false,});this.chart.scale('y',{//‘y’就是数据中的数值,比如折线图,柱状图的y轴数据formatter:(val)=>{