官方示例效果：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. php 键值数组搜索查询

    php  键值数组查询 ,需要先将其转换为纯数组,然后才能用in_array 进行搜索. $arr_combos = [ ['id' => '1001', 'value' => 'zs' ...

  2. leetcode347 Top K Frequent Elements

    """ Given a non-empty array of integers, return the k most frequent elements. Example ...

  3. Hive事务原理和Datax同步事务表问题解决

    一.事务的概述 1.定义 事务就是一组单元化操作,这些操作要么都执行,要么都不执行,是一个不可分割的工作单位. 2.特点 事务(transaction)具有的四个要素:原子性(Atomicity).一 ...

  4. 用 Heapster 监控集群【转】

    Heapster 是 Kubernetes 原生的集群监控方案.Heapster 以 Pod 的形式运行,它会自动发现集群节点.从节点上的 Kubelet 获取监控数据.Kubelet 则是从节点上的 ...

  5. iOS Framework制作流程

    1.新建工程选择iOS —> Cocoa Touch Framework 2.进入创建好的工程删除掉自带的工程同名头文件 3.添加所需文件 4.TARGETS —> Build Setti ...

  6. express 配置 https 服务 （ 以阿里云服务器为例）， 探索一周终于搞定

    首先最重要的是 你要明白 https接口的接收或者发送 的形式 是  https://域名:端口号   而不是 https://ip:端口号   一,首先,去阿里云注册免费ssl证书   1,在搜索框 ...

  7. php 获取时间段

    switch ($type){ case 'day'://当日 $end=date(,,,date(,date('Y'))); $where=' and '.$pre.'create_time> ...

  8. 060、Java中定义有返回值有参数的方法

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  9. 04.Delphi通过接口IInterface实现多重继承

    IInterface表示申明了一些函数,自己本身没有实现部分,需要由继承它的类来实现函数 uSayHello代码如下 unit uSayHello; interface uses SysUtils, ...

  10. centos下安装tomcat8.

    一.tomcat安装之前,首先安装java jdk,所以手首先将相关安装包都下载传到虚拟机上 1.下载java的linux----jdk1.8安装 到官网上下载与本虚拟机版本位相适应的位节数的Linu ...