官方示例效果：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. QAM格雷码映射的规则（Gray Code Mapping in QAM）

    高阶调制(QAM,MQAM)信号中做基带映射,格雷码作为一种规范的映射规则,加上I,Q方向上相邻两个星座点对应的Bit_Cluster中只有一个Bit不同,所以有方便统一的特性. 以16QAM为例,先 ...

  2. NO29 用户提权sudo配置文件详解实践--志行为审计

     用户提权sudo配置文件详解实践: 放到visudo里:  验证权限:

  3. jmeter用Stepping Thread Group 递增并发数

    jmeter安装插件Stepping Thread Group 如图所示设置的时候,本以为是每2秒 按 1 2 3 4 递增的,总共请求应该是10个,可是运行后却请求了几十个. 这个是有关线程数是否就 ...

  4. LInux的服务器编码格式的查看与更改

    1.locale 命令查看字符编码 然后修改/etc/sysconfig/i18n,如改成中文编码: LANG=en_US.UTF-8 改为 LANG="zh_CN.GBK" 然后 ...

  5. (转)如何判断VPS是基于哪种虚拟技术？Xen、OpenVZ、Xen HVM、KVM还是VMware

    对于VPS新手来说,怕被无良的奸商给忽悠,下的Xen的却给的OpenVZ的,如何来判断自己买的VPS是那种虚拟技术的,下面VPS侦探整理一些常见的方法. 1.通过系统上的相关目录或文件判断 执行:ls ...

  6. Java笔记--泛型

    1.泛型解决元素存储的安全性问题:解决获取数据元素时,需要类型强转的问题. --泛型的核心思想:把一个集合中的内容限制为一个特定的数据类型. 2.泛型的使用 1)在集合中使用 2)自定义泛型类.泛型接 ...

  7. javascript 原型链污染

    原理①javascript中构造函数就相当于类,并且可以将其实例化 ②javascript的每一个函数都有一个prototype属性,用来指向该构造函数的原型同样的javascript的每一个实例对象 ...

  8. List<string>绑定到DataGridView控件

    问题 将一个简单的List<string>作为数据源绑定到 DataGridView myDataGridView.DataSource = myStringList; 但是只得到一个名为 ...

  9. 记录：JAVA抽象类、接口、多态

    JAVA抽象类.接口.多态 1. 多态 定义 多态是同一个行为具有多个不同表现形式或形态的能力.(多态就是同一个接口,使用不同的实例而执行不同操作) 如何实现多态 继承和接口 父类和接口类型的变量赋值 ...

  10. Day 25：XML解析

    XML解析 xml文件除了给开发者看,更多的情况使用程序读取xml文件的内容.这叫做xml解析 XML解析方式(原理不同) DOM解析 SAX解析 XML解析工具 DOM解析原理: JAXP (ora ...