react + Antv G6实现简易的脑图编辑器

最新推荐文章于 2024-05-11 09:58:47 发布
最新推荐文章于 2024-05-11 09:58:47 发布
阅读量2.5k 收藏 4
点赞数 1
文章标签： antv g6 editor antv g6 react 脑图编辑器 react 脑图编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aminwangaa/article/details/107992096
版权
目前功能

初版编辑器：
点击编辑按钮，进入编辑模式，选择节点

  • 更改字体颜色
  • 更改字体大小
  • 添加子节点
  • 添加同级节点（根节点无法添加同级节点）
  • 按Bachspace(删除按钮) 可删除节点及其子节点(根节点无法删除)
  • 布局变更 不需要进入编辑模式
  • 退出编辑模式，可以拖动、缩放画布
代码库地址

简易脑图代码库

效果图

在这里插入图片描述

aminwangaa
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
g6自定义html,react怎么使用g6
weixin_39835965的博客
06-16 794
在 React 中使用 G6AntV G6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。G6 是一个纯 JS 库，不与任何框架耦合，也就是说可以在任何前端框架中使用，如 React、Vue、Angular 等。由于我们目前绝大多数都是基于 React 技术栈的，所以本篇文...
Antv G6超详细笔记及使用案例分享
最新发布
m0_73884922的博客
06-22 1381
G6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。
React项目中使用Antv-G6
kilig
08-20 3485
其实这个算不上什么错误，只是我们在script标签中少写了文档声明： React 中使用 JSX语法，它是对 JavaScript 的语法扩展，它可以很好地描述 UI 应该呈现出它应有交互的本质形式。 所以script标签必须得写上type=“text/babel”声明，因为我们需要对JSX语法进行解析。 <script type="text/babel"></script> ...
React使用@antv/g6绘制树形图
qq_31644543的博客
03-30 4696
React使用@antv/g6绘制树形图，本文代码是我项目中的实现逻辑，支持展开收起，可以直接复制代码到自己项目中修改
AntV G6 初入门（react中的使用）
qq_38980678的博客
07-25 3647
在React中使用G6，和在HTML中使用基本相同，唯一比较关键的区分就是在实例化Graph时，要保证DOM容器渲染完成，并能获取到DOM元素。经官网介绍，G6内部绝大多数都是基于React技术栈的，所以官方也仅提供一个G6在React中使用的Demo。在需要展示的页面进行相应的引入即可使用。首先，我们来了解一下G6的核心概念。d.配置数据源，渲染。...
g6-in-react:如何在React中使用G6，如何在使用G6的过程中渲染自定义的React组件，所有的疑问这里都可以帮你解答
05-09
如何在React中使用G6？ 在平时的答疑工作中，经常会遇到「如何在React中使用G6」的问题，为了让G6用户能够在开发中很方便地接入G6，我们提供一个G6在React中使用的Demo，供开发者参考。 说明：鉴于目前React hooks比较:fire:， 且大多数React开发者已经在使用hooks进行业务开发，因此，我们提供的Demo也是基于hooks的。 更详细的内容请参考文档。 功能 我们提供的Demo，包括了以下功能： 自定义节点； 自定义边； 节点的tooltip； 边的tooltip； 节点的ContextMenu； tooltip及ContextMenu如何渲染自定义的React组件。 Development # clone repo $ git clone https://github.com/baizn/g6-in-react.git # install dependencie
react hocks ggeditor 脑图开发（双向细目表）， 实用技巧
powerFulCat的博客
03-29 614
react hocks ggeditor脑图开发 双向细目表
react使用gg-editor自定义脑图节点
逻辑无道
10-20 979
import React, { Fragment } from 'react'; import { RegisterNode } from 'gg-editor'; class EditorCustomNode extends React.Component { render() { const config = { draw(item) { const group = item.getGraphicGroup(); .
GGEditor基于G6和React的可视化图编辑器可用于画流程图思维导图
08-10
GGEditor 基于 G6 和 React 的可视化图编辑器，可用于画流程图 思维导图
g6-思维链路图
weixin_43909743的博客
04-15 2021
前言 需求：集团公司风险链路图 1、首次接触@antv/g6，进行记录总结 2、最终实现如下 3、实现有些杂乱 点击更多加载调取接口加载5条 点击框显示公司数据 实现步骤 安装"@antv/g6": "4.5.0", "insert-css": "^2.0.0", 安装 npm install --save @antv/g6 学习方式： 官网 https://antv.vision/zh/ 蚂蚁金服 G6 文档 https://www.bookstack.cn/books/antv-g6 基础
antv g6 自定义流水步骤图
aminwangaa的博客
08-27 1675
实现效果 思路 自定义节点、自定义边 每行节点个数：第一行六个，其他都为五个 去除第一个节点，剩余节点用5为基数，通过Math.floor取行数，设置Y 用索引 % 5 取余，设置X 单独处理索引为5的倍数的节点 单独处理索引除5余1的节点 新手入门不是太熟练，就自定义了四条边，向右的两条，向左的两条， nodes index x y 0 baseX baseY 1 firstW baseY 2 firstW + diffWidth baseY 3 firstW + 2 *
AntV-G6：画自动连线流程图
weixin_41825921的博客
01-10 1万+
效果图 安装&引用js 安装和引用教程： https://g6.antv.vision/zh/docs/manual/getting-started/#%E5%AE%89%E8%A3%85--%E5%BC%95%E7%94%A8 >>引用方式 1、在线引用 <script src="https://unpkg.com/@antv/g6...
AntV-G6 流程图Graph之Tooltip残留问题
qq_43060287的博客
02-09 1796
AntV-G6 流程图Graph之Tooltip残留问题
推荐开源项目：GGEditor - 可视化图编辑神器
gitblog_00046的博客
05-11 412
推荐开源项目：GGEditor - 可视化图编辑神器 GGEditorA visual graph editor based on G6 and React项目地址:https://gitcode.com/gh_mirrors/gg/GGEditor 1、项目介绍 GGEditor 是一款基于阿里巴巴蚂蚁金服团队开发的 G6 图表库和 Facebook 的 React 框架构建的可视化图编辑器。...
VUE和Antv G6实现在线拓扑图编辑
热门推荐
qq_36659961的博客
04-04 1万+
VUE和Antv G6实现在线拓扑图编辑 效果图如下： 我使用的是G6 2.0,也可以使用 G6 3.0，3.0的拓扑图单独作为一个编辑器使用，使用更加方便。不过2.0的比较简单，容易上手。 1.首先在Antv官网上找到蚂蚁Antv G6插件，引入插件。 也可以npm 方式引入。 2.写组件 export default { name: “index”, components: {},...
前端图表插件echart、amchart、g6
hkduan的博客
03-24 1953
前端图表插件 1.echart https://echarts.apache.org/examples/zh/index.html 2.amchart https://www.amcharts.com/demos/#hierarchy 3.g6 http://antv-2018.alipay.com/zh-cn/g6/3.x/demo/tree/tree-dendrogram.html
antv G6 + react umi(vue,ng) 实现节点红点（badges）
weixin_43319667的博客
09-08 1204
G6 node 红点
在 Vue3 中优雅使用 antV G6 的流程总结
kiku
01-03 1万+
在vue3 中使用 antV G6 的流程
react+antv x6人工智能建模 DAG 图使用
05-19
它提供了一套强大的图形编辑器和图形可视化工具，可以帮助您快速创建和编辑各种类型的图形。 对于人工智能建模，您可以使用各种算法和技术来创建DAG图。例如，您可以使用梯度下降算法或遗传算法来优化模型参数，或...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值