<!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. 牛客网练习赛t2（线段树）

    题解: 好像因为他说了 数据范围全部在ll以内 所以直接暴力就可以过了 比较正常是用线段树来维护 洛谷上有道模板题是支持加,乘,区间和 而这题还多了区间平方和的操作 按照那题的操作 我们维护的时候保证 ...

  2. C# 之 @ Assembly

    @ Assembly指定需要动态编译的类,在编译期间将程序集链接到 ASP.NET 应用程序页(例如网页.用户控件.母版页或 Global.asax 文件),使程序集的所有类和接口都在该页上可用. & ...

  3. WebApi 得到提交过来的 post 数据

    byte[] byts = new byte[System.Web.HttpContext.Current.Request.InputStream.Length]; System.Web.HttpCo ...

  4. DataFrames和Kudu

    Kudu为Kudu表提供了一个自定义的原生数据源.可以和DataFrame API紧密集成: 使用DataFrame的好处就是可以从很多的数据源创建dataframe,包括现有的RDD,Hive表或S ...

  5. 排查Linux机器是否已被入侵

    来自--马哥Linux运维 1.入侵者可能会删除机器的日志信息 ,可以查看日志信息是否存在后者被清除 [root@zklf-server02 ~]# ll -h /var/log/ total 3.4 ...

  6. fillder--信息面板展示serverIP

    1.Ctrl+R打开面板 2.如上图的位置,加上一句后,重启Fillder即可 FiddlerObject.UI.lvSessions.AddBoundColumn(, "X-HostIP& ...

  7. BZOJ1455 罗马游戏 左偏树 可并堆

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1455 题意概括 n个人,2种操作. 一种是合并两个人团,一种是杀死某一个人团的最弱的人. 题解 左 ...

  8. Qt错误 —— 无法启动此程序 因为计算机丢失QtCore5.dll 以及 无法定位程序输入点于动态链接库QtCore5.dll

    首先,设置计算机的环境变量Path,计算机=>右键属性=>高级设置=>环境变量=>系统变量=>双击Path,在Path后面增加C:\Qt\Qt5.8.0\5.8\ming ...

  9. CentOS7配置FTP服务器增强版~(零基础学会FTP配置)

    ps:原文不知出处,但是原文也不能正常启动,这里做了一些修改!如果能正常配置请在下方留言让更多的人看到,因为之前我本人照着网上的教程安装卸载了十多次也无法正常使用,不希望后面的兄弟继续浪费时间,如果不 ...

  10. HDU3339 In Action 【最短路】+【01背包】

    <题目链接> 题目大意: 给出一个0-n组成的图,1-n的点上分布着值为pow的电站,给出图的m条边以及距离,从0出发到n个点中的x个点的行走距离和最小(因为是每炸一个点派出一辆坦克),且 ...