antv g6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="/g6.js"></script>
<script src="/plugins.js"></script>
<script src="/jquery-3.2.1.min.js"></script>
<script src="/d3-4.13.0.min.js"></script>
<script>
const data = {
"nodes": [
{
"shape": "customNode",
"id": "node1",
"x": 50,
"y": 100,
label:"html"
},
{
"shape": "customNode",
"id": "node2",
"x": 250,
"y": 100,
label:"div[1]"
},
{
"shape": "customNode",
"id": "node3",
"x": 400,
"y": 600,
label:"div[2]"
}
],
"edges":[{"id":"111","source":"node1","target":"node2"},{"id":"222","source":"node1","target":"node3"}]
};
G6.registerNode('customNode', {
draw(item){
const group = item.getGraphicGroup();
const model = item.getModel();
group.addShape('text', {
attrs: {
x: -15,
y: -5,
fill: '#000',
text: model.label,
textBaseline: 'top'
}
});
return group.addShape('circle', {
attrs: {
x: 0,
y: 0,
r:20,
stroke:'#000'
}
});
}
});
var graph = new G6.Graph({
id: 'mountNode', // dom id
height: window.innerHeight,
//plugins: [template, nodeSizeMapper, nodeColorMapper, edgeSizeMapper],
animate: true,
layout: {}
});
var dagre = new G6.Layouts['Dagre']({
nodesep: function nodesep() {
return graph.getWidth() / 50;
},
ranksep: function ranksep() {
return graph.getHeight() / 25;
},
marginx: function marginx() {
return graph.getWidth() / 8;
},
marginy: function marginy() {
return graph.getHeight() / 8;
},
useEdgeControlPoint: false
});
graph.read(data);
graph.changeLayout(dagre);
</script>
</body>
</html>
antv g6的更多相关文章
- antV G6流程图在Vue中的使用
最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看文档太吃力,不过好在最终让我发现了AntV G6流程图图表库,最新版为2.0,不过编辑器在2.0版本还 ...
- React + umi +antd+antv/g6 实现力图
官方示例效果:http://antv.alipay.com/zh-cn/g6/2.x/demo/net/2017-link-data.html 改编效果: 实现步骤: 环境:nodejs.yarn/n ...
- React使用AntV G6实现流程图
安装 npm install @antv/g6 --save 引用 import G6 from '@antv/g6' 自定义节点 /** * 方式一 */ G6.registerNode('rect ...
- vue结合antV/g6 实现网络拓扑图
最近很多业务场景都会需要用到拓扑图,翻找了很多资料,最后选择了antV/g6,主要原因有以下几点: 1.阿里出品,所以框架的成熟性有保障 2.业务场景契合(1.规则拓扑图:2.动画流向:每个节点会有流 ...
- AntV G6绘制流程图学习例子
下面代码可以直接贴到html文件中运行看效果. 代码说明 js中data是一个json变量,里面有两个关键对象"nodes.edges",分别来描述节点.节点间箭线. 更多&quo ...
- G6 学习资料
G6 学习资料 网址 G6 1.x API 文档 http://antvis.github.io/g6/doc/index.html 官方demo列表 https://github.com/antvi ...
- npm 安装指定模块版本
npm list 查看具体模块 如: npm list @antv/g6 如需要安装指定的模块和版本 保存时 - --save-dev 是你开发时候依赖的东西,--save 是你发布之后还 ...
- antdVG6随记
g6是一个很棒的可视化工具 目前支持开发者搭建属于自己的图,图分析.图应用.图编辑器 图编辑器可以支持多种图例的创建 G6 是一个简单.易用.完备的图可视化引擎,它在高定制能力的基础上,提供了一系列设 ...
- 在 React 项目中引入 GG-Editor 编辑可视化流程
蚂蚁金服数据可视化团队曾经开源了一款G6-Editor,但后来停止了对外支持,学习成本太高 好在后来他们团队的大牛高力结合 React + G6 开源了一个 GG-Editor(其实就是G6-Edit ...
随机推荐
- 【Android】setHapticFeedbackEnabled 设置
使其在触摸的时候没有触感反馈.接着设置长按事件的监听. 代码在:launcher launcher->setupViews方法 // Setup the workspacemWorkspace. ...
- 使用spark集成kudu做DDL
spark对kudu表的创建 定义kudu的表需要分成5个步骤: 1:提供表名 2:提供schema 3:提供主键 4:定义重要选项:例如:定义分区的schema 5:调用create Table a ...
- Python 私有属性
#!/usr/bin/env python # -*- coding:utf-8 -*- # 作者:Presley # 邮箱:1209989516@qq.com # 时间:2018-08-05 # 类 ...
- Codeforces Round #517 体验记
原文链接 https://www.cnblogs.com/zhouzhendong/p/CF1071.html 赛前: 呀,这个 Round # 必须打啊. 于是临时改变注意决定打这一场.用小号打. ...
- 027 ResourceBundle.getBundle方法
在程序中遇到这个,感觉会比较重要,就学习一番. 一:静态读取配置文件的Demo 1.新建工程 2.新建properties 3.新建Java的demo程序 注意不要写properties. packa ...
- 总结TCP为什么三次握手四次挥手
为什么三次握手,而不是两次或者四次五次? 2019/3/4更新: 在阅读了很多技术博客后,发先大家对为什么三次握手不是两次众说纷纭:我觉得说的最好的是英文文章对TCP的解读.TCP和UDP的区别就是可 ...
- day4 字符串的操作
今天是第四天,一如既往的每天都有不会做的内容,然后还是那种你使劲的绞尽脑汁都想不出来的问题,而且还得是别人提示着,讲着,演示着才能明白的,过后自己还得使劲捉摸才能慢慢吃透.一开始还挺顺利的,还以为自己 ...
- themeleaf引入公共页面
<div th:include="/top :: html"></div>//引用公共页面 <div th:replace="head&qu ...
- mniui里面没有只显示年的控件,monthpicker显示年月,datepicker显示具体到天的日期
spinner无法出现下拉框,只能一下下的点击. combobox可以出现下拉框,但是一般情况是从url后台取值. 现在可以自己在js里定义需要的值. <td><input id=& ...
- Codeforces 1131F Asya And Kittens (构造)【并查集】
<题目链接> 题目大意:有$n$只小猫,开始将它们放在指定的n个单元格内,然后随机从n-1个隔板中拆除隔板,最终使得这些小猫在同一单元格.现在依次给出拆除隔板的顺序,比如:1 4 就表示1 ...