G6
文章平均质量分 80
lookingForw_4585
大龄青年,编程小白。
头发茂密的前端攻城狮~~~
展开
-
antv/G6使用记录,自定义简单的节点,实现流程图
antv/G6使用记录,自定义简单的节点,实现流程图效果展示实现代码说明效果展示作为一个简单的记录,包括自定义节点,边等实现代码完整代码如下:G6使用的版本为3.5.0<template> <div class="main-content-box"> <div id="container"></div> </div></template><script>import G6 from '@a原创 2021-04-07 17:22:40 · 3914 阅读 · 13 评论 -
antv/G6使用记录,调用save方法,对数据model进行改造,并重新渲染
antv/G6使用记录,调用save方法,对数据model进行改造,并重新渲染 主要说明在使用antv/g6时,对于画布中的节点,做某种操作(例如改变节点的颜色等),保存数据,以供一个新的画布渲染的方法 例子比较简单,不涉及太复杂的操作,先看下效果: 左侧的容器中是初始的画布,使用自定义的方式对菱形节点进行了注册(此方法为官方示例),点击按钮时将左侧的画布中的元素的数据模型进行保存,然后在右侧新创建一个graph,将保存的值稍加修改,然后进行渲染,就得到了右侧容器中的内容 场景:例如点原创 2020-10-17 16:43:01 · 5079 阅读 · 2 评论 -
antv/G6使用记录,vue组件实现节点、边的动态增减、右键事件等功能
antv/G6是蚂蚁金服数据可视化团队出品的一个功能完备的图可视化引擎。 介于业务需要,最近在学习G6,特此记录下~~ 简单展示:功能点:连接关系图表鼠标控制缩放节点拖动事件画布拖动事件边的状态切换节点层级展示边的动态增加还原视图特性: 状态:G6中提供了状态管理,指的是节点或边的状态,包括交互状态和业务状态。 动画:动画是可视化中非常重要的内容,本例中涉及到边的动画效果 字体图标:本例中使用iconfont,具体实现参照G6官方文档,比较的详细原创 2020-08-04 19:39:56 · 9120 阅读 · 23 评论 -
antv/G6使用记录,实现简单vue组件的demo
antv/G6是蚂蚁金服数据可视化团队出品的一个功能完备的图可视化引擎。 介于业务需要,最近在学习G6,特此记录下~~ 简单展示:功能点:连接关系图表鼠标控制缩放节点拖动事件画布拖动事件边的状态切换边动画特性: 状态:G6中提供了状态管理,指的是节点或边的状态,包括交互状态和业务状态。 动画:动画是可视化中非常重要的内容,本例中涉及到边的动画效果 字体图标:本例中使用iconfont,具体实现参照G6官方文档,比较的详细 布局:G6提供了一些布局的方法原创 2020-06-20 15:15:50 · 2284 阅读 · 4 评论