g6是一个很棒的可视化工具

目前支持开发者搭建属于自己的图,图分析、图应用、图编辑器

图编辑器可以支持多种图例的创建

G6 是一个简单、易用、完备的图可视化引擎,它在高定制能力的基础上,提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图 图分析 应用或是 图编辑器 应用

最近一直在被G6可视化工具困扰,在逐渐摸索过程中,慢慢可以进行简单图例的搭建

以下,根据react中如何使用G6来写这篇文章

----Go

整体项目使用es6模块化开发

首先下载G6

npm install @antv/g6 --save

import React from 'react';
import G6 from '@antv/g6'; class G6 extends React.Component {
constructor(props) {
super(props);
this.state={ };
}
componentDidMount() {
// dom 已经渲染完成时加载图片, G6渲染依赖根节点
this.renderG6();
}
renderG6 = () => {
// 渲染图所需数据
const data = {
nodes: [{
id: 'node1',
shape: 'customNode',
x: 100,
y: 200
},{
id: 'node2',
x: 300,
y: 200
}],
edges: [{
id: 'edge1',
target: 'node2',
source: 'node1'
}]
};
// 初始化G6图
const graph = new G6.Graph({
container: 'mountNode',
width: 600,
height: 300
});
// Graph 是最基础的图类, G6 技术栈中所有关系图都是由该类负责绘制
// 读数据
graph.read(data);
}
render() {
return (
<div id="mountNode"></div>
)
}
}

自定义节点

    G6.registerNode('customNode', {
draw(item){
// draw 是图项最终绘制的接口, 可以拿到shape为customNode的所有数据
const group = item.getGraphicGroup(); // 获取 G (图形库) 的图形图组
const model = item.getModel();
// 图形数据
return group.addShape('rect', {
attrs: {
x: 0,
y: 0,
width: 100,
height: 100,
stroke: 'red'
}
anchor: array || object || callback
<!-- anchor: [
[0.5, 1], // 底边中点
[0.5, 0], // 上边中点
[1, 0], // 左边中点
[1, 0.5], // 右边中点
], --> });
}
}, '基于某种图形进行绘制的类型');


先下班。。。。。。

antdVG6随记的更多相关文章

  1. Spark踩坑记——Spark Streaming+Kafka

    [TOC] 前言 在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark strea ...

  2. Spark踩坑记——数据库(Hbase+Mysql)

    [TOC] 前言 在使用Spark Streaming的过程中对于计算产生结果的进行持久化时,我们往往需要操作数据库,去统计或者改变一些值.最近一个实时消费者处理任务,在使用spark streami ...

  3. 这些年一直记不住的 Java I/O

    参考资料 该文中的内容来源于 Oracle 的官方文档.Oracle 在 Java 方面的文档是非常完善的.对 Java 8 感兴趣的朋友,可以从这个总入口 Java SE 8 Documentati ...

  4. 千回百折:百度Java研发offer斩获记和经验分享

    起因 面试过程 等待offer的过程中悟道 Java面试常考知识点个人总结 过程 百度——作为国内互联网的巨头之一,最近的一些风波对其褒贬不一,但是类似事件不是第一次发生,也绝对不是最后一次,对于真的 ...

  5. 记一次nginx部署yii2项目时502 bad gateway错误的排查

    周六闲来无事,就试着安装和部署下yii2,安装过程没什么问题,但部署到nginx上时遇到了502 bad gatewary问题,折腾了半天才搞定.这个问题是我以前在部署yii2时没有遇到过的,因此记在 ...

  6. 原生JS实战:写了个一边玩游戏,一边记JS的API的游戏

    本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5878913.html 本程序[一边玩游戏,一边记JS的API]是本人的个 ...

  7. ArcGIS中的标注和注记

    在ArcMap中可以使用标注和注记来识别要素,选择标注或注记取决于你需要如何控制文本显示以及在ArcMap中如何存储文本. 1.标注只是临时显示相关数据或字段 2.标注用于长时间保存数据以及显示方式. ...

  8. 记处理线上记录垃圾日志 The view 'Error' or its master was not found

    最近监控线上日志,网站是ASP.NET MVC 开发的,发现不少错误日志都记录同样的内容: The view 'Error' or its master was not found or no vie ...

  9. 算法是什么我记不住,But i do it my way. 解一道滴滴出行秋招编程题。

    只因在今日头条刷到一篇文章,我就这样伤害我自己,手贱. 刷头条看到一篇文章写的滴滴出行2017秋招编程题,后来发现原文在这里http://www.cnblogs.com/SHERO-Vae/p/588 ...

随机推荐

  1. PHP Mailer 发送邮件

    <?php /* 下载网址 https://github.com/PHPMailer/PHPMailer 打开下载的压缩包文件目录 将 PHPMailer-master 下的 src 文件夹复制 ...

  2. [翻译]Android官方文档 - 通知(Notifications)

    翻译的好辛苦,有些地方也不太理解什么意思,如果有误,还请大神指正. 官方文档地址:http://developer.android.com/guide/topics/ui/notifiers/noti ...

  3. 使用python操作Memcache、Redis、RabbitMQ、

    Memcache 简述: Memcache是一套分布式的高速缓存系统,由LiveJournal的Brad Fitzpatrick开发,但目前被许多网站使用以提升网站的访问速度,尤其对于一些大型的.需要 ...

  4. SSH管理(重启 停止 运行 安装)centos7

    下面整理经常用到管理SSH服务的命令,方便复制哈. SSH服务状态 systemctl status sshd.service SSH运行命令 service sshd start SSH重启命令 s ...

  5. bzoj1211-树的计数

    题意 给出 \(n\) 和长度为 \(n\) 的数列 \(d\) 表示每个点的度数,问有多少颗满足要求的树. 分析 这题是prufer编码的应用. prufer编码是对一个带标号无根树的刻画,生成方式 ...

  6. 【bzoj3130】[Sdoi2013]费用流 二分+网络流最大流

    题目描述 Alice和Bob做游戏,给出一张有向图表示运输网络,Alice先给Bob一种最大流方案,然后Bob在所有边上分配总和等于P的非负费用.Alice希望总费用尽量小,而Bob希望总费用尽量大. ...

  7. EVE-NG硬盘扩容,存储海量镜像

    EVE-NG硬盘扩容,存储海量镜像 来源 http://blog.51cto.com/sms1107/1928453 一.查看当前磁盘使用情况 /dev/mapper/eve--ng--vg-root ...

  8. Thuwc2018 游记

    上一次没有滚粗的比赛已经是9个月前了QAQ.但我现在回过头去看那篇“zjoi游记”,却发现自己并不能从中得到收获.希望这次写下的东西,可以帮助我更好地准备即将到来的省选(雾) day 0 火车上浪10 ...

  9. Hbase(一)基础知识

    一.Hbase数据库介绍 1.简介 HBase 是 BigTable 的开源 java 版本.是建立在 HDFS 之上,提供高可靠性.高性能.列存储. 可伸缩.实时读写 NoSQL 的数据库系统. N ...

  10. Notes of fwt

    昨天考试由于不会fwt而爆炸,所以今天搞了一下fwt……话说这玩意的普及程度已经很高了.fwt,快速沃尔什变换,可以用于位运算卷积的优化,是一种线性变换,所以就会有许多好的性质(eg:可以直接模,可以 ...