<!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的更多相关文章

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

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

  2. React + umi +antd+antv/g6 实现力图

    官方示例效果:http://antv.alipay.com/zh-cn/g6/2.x/demo/net/2017-link-data.html 改编效果: 实现步骤: 环境:nodejs.yarn/n ...

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

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

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

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

  5. AntV G6绘制流程图学习例子

    下面代码可以直接贴到html文件中运行看效果. 代码说明 js中data是一个json变量,里面有两个关键对象"nodes.edges",分别来描述节点.节点间箭线. 更多&quo ...

  6. G6 学习资料

    G6 学习资料 网址 G6 1.x API 文档 http://antvis.github.io/g6/doc/index.html 官方demo列表 https://github.com/antvi ...

  7. npm 安装指定模块版本

    npm list  查看具体模块 如: npm list @antv/g6 如需要安装指定的模块和版本 保存时      - --save-dev 是你开发时候依赖的东西,--save 是你发布之后还 ...

  8. antdVG6随记

    g6是一个很棒的可视化工具 目前支持开发者搭建属于自己的图,图分析.图应用.图编辑器 图编辑器可以支持多种图例的创建 G6 是一个简单.易用.完备的图可视化引擎,它在高定制能力的基础上,提供了一系列设 ...

  9. 在 React 项目中引入 GG-Editor 编辑可视化流程

    蚂蚁金服数据可视化团队曾经开源了一款G6-Editor,但后来停止了对外支持,学习成本太高 好在后来他们团队的大牛高力结合 React + G6 开源了一个 GG-Editor(其实就是G6-Edit ...

随机推荐

  1. Codeforces 806 D. Perishable Roads Dijkstra

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF806D.html 题目传送门 - CF806D 题意 给定一个 n 个点的无向完全图,每一条边有一定的边权. ...

  2. IDEA链接mySql问题 : You have an error in your SQL syntax : 'OPTION SQL_SELECT_LIMIT=1000' （or 'OPTION SQL_SELECT_LIMIT=DEFAULT'）

    IDEA控制台错误信息: check the manual that corresponds to your MySQL server version for the right Code: 1064 ...

  3. JavaWeb 之Ubuntu intelliJ 新建maven项目及配置tomcat

    一. 破解安装 intelliJ 下载网址:https://www.jetbrains.com/idea/ 破解激活:https://www.cnblogs.com/tanrong/p/7309343 ...

  4. sql语句表示不等于

    <> != 后面均不带引号“”

  5. mybatis的xml处理大于和小于号问题

    https://blog.csdn.net/u022812849/article/details/42123007

  6. Addition Chains POJ - 2248 （bfs / dfs / 迭代加深）

    An addition chain for n is an integer sequence <a0, a1,a2,...,am=""> with the follow ...

  7. POJ 1321-棋盘问题【DFS+递归】

    题目链接 题目大意: Description 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大 ...

  8. wireshark抓包工具详细说明及操作使用

    https://blog.csdn.net/qq78069460/article/details/79153895

  9. Git 基本命令行操作

    一.本地仓库操作 1.初始化    git init 2.添加版本控制文件    git add README.md3.本地提交    git commit -m “1st commit”4.配置远程 ...

  10. 上海交大ACM总教头俞勇讲述“最聪明人的故事”

    这是一场世界大学生之间"最强大脑"的较量:这是拥有数十年历史的ACM国际大学生计算机程序设计大赛的赛场:斯坦福.加州理工.麻省理工.哈佛--当一个又一个在计算机科学领域拥有世界顶尖 ...