官方示例效果：http://antv.alipay.com/zh-cn/g6/2.x/demo/net/2017-link-data.html

改编效果：

实现步骤：

　　环境：nodejs、yarn/npm、umi(最新即可)

　　创建项目：

　　　　1.打开cmd

　　　　2.创建项目文件夹：输入mkdir ReactUmiG6App & cd ReactUmiG6App 回车

　　　　3.创建项目：yarn create umi

　　 　　4.添加需要的依赖包：react 、antd、@antv/g6

　　　　　　　　yarn add antd、yarn add react 、yarn add @antv/g6

　　　　 5.以上就是所有准备，接下来就可以具体实现了

具体编码参考官方API及实例就可，其他需要注意的就是依赖引用了，以下供参考

最后附上源码：

https://gitee.com/wiaoong/studynotes.git

React + umi +antd+antv/g6 实现力图的更多相关文章

  1. react+umi+netcore+signalR BS和客户端设备 简单通讯

    微信扫码登录工作用 仅作记录 扫码访问服务器地址 实现扫码服务器地址通讯中断设备解锁 采用signalR 双向异步通知中断 创建控制器 ChatController 注入集线器上下文 IHubCont ...

  2. React使用AntV G6实现流程图

    安装 npm install @antv/g6 --save 引用 import G6 from '@antv/g6' 自定义节点 /** * 方式一 */ G6.registerNode('rect ...

  3. React & shit Antd

    React & shit Antd https://ant.design/components/tooltip-cn/ https://ant.design/components/tag-cn ...

  4. antV G6流程图在Vue中的使用

    最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看文档太吃力,不过好在最终让我发现了AntV G6流程图图表库,最新版为2.0,不过编辑器在2.0版本还 ...

  5. vue结合antV/g6 实现网络拓扑图

    最近很多业务场景都会需要用到拓扑图,翻找了很多资料,最后选择了antV/g6,主要原因有以下几点: 1.阿里出品,所以框架的成熟性有保障 2.业务场景契合(1.规则拓扑图:2.动画流向:每个节点会有流 ...

  6. React + Dva + Antd + Umi 概况

    Dva 由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:"dva 是 react 和 redux 的最佳实践". Ant ...

  7. react+dva+antd+umi项目建立操作流程及知识点总结

    0.1 引用 0.1.1 react官网 0.1.2 dva官网 0.1.3 antd-mobile官网 0.1.4 umijs官网 0.1.5 转载文章-umi操作手册 一.what are the ...

  8. react : umi 引入 antd 踩坑

    首先要明确一个问题. 不管是 antd 还是 dva 还是别的什么东西,他们都是 umi 的插件——只要这个项目是使用 umi 脚手架生成的. 所以第一步应该是 .umirc.js (config.j ...

  9. react+umi+dva+antd中dva的数据流图解

随机推荐

  1. POJ 2718 Smallest Difference dfs枚举两个数差最小

    Smallest Difference Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 19528   Accepted: 5 ...

  2. brew services start redis 无法使用问题排查

    起因 Mac上使用brew services start --all指令同时启动多个服务显示成功 但是,连接四个服务所在端口均无响应. 仔细核对过brew指令启动服务使用的路径.配置文件路径均无问题. ...

  3. Java8 使用LocalDate计算两个日期间隔多少年，多少月，多少天

    最近项目遇到一个需要计算两个日期间隔的期限,需要计算出,整年整月整日这样符合日常习惯的说法,利用之前的Date和Calendar类会有点复杂,刚好项目使用了JDK8,那就利用起来这个新特性,上代码: ...

  4. idea2018破解到2099年

    破解的详细过程: 1.从下面地址下载一个jar包,名称是 JetbrainsCrack-3.1-release-enc.jar 下载地址链接: https://pan.baidu.com/s/1WU5 ...

  5. Redis详解（四）——删除策略

    Redis详解(四)--删除策略 Redis中的数据特征 Redis是一种内存级数据库,所有数据均存放在内存中,内存中的数据可以通过TTL指令来获取其状态,当 key 不存在时,返回 -2 . 当 k ...

  6. python多进程编程中常常能用到的几种方法

    python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU资源,在python中大部分情况需要使用多进程.python提供了非常好用的多进程包Multiprocessing,只需要定义 ...

  7. 03.Delphi通过接口实现多重继承的优化

    在上一篇02中,写到的sayhello函数,需要使用2个接口参数,很繁琐.可以使用as参数,把多重继承的子类对象变成需要的对象 uSayHello代码如下 unit uSayHello; interf ...

  8. C#实体类生成工具（onlymodel）

    最近刚从常用数据库Mysql转到SqlServer,深陷于没有实体生成工具的痛苦,尝试过动软,但生成的字段类型和数据库的有些不对应.以及网上的一些实体生成工具,但要么操作太过繁琐,要么效果不如人意,所 ...

  9. 时间戳，秒级，毫秒级转换DateTime格式

    解决了本地时间和格林尼治时间差问题 function DateTimeToTp(ConvDate: TDateTime): time_t;var zi: TTimeZoneInformation;be ...

  10. redis : Can't save in background: fork: Cannot allocate memory

    redis : Can't save in background: fork: Cannot allocate memory JAVA程序报错信息: MISCONF Redis is configur ...