<!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. mysql把查询结果集插入到表理

    把表B的内容插入到表A INSERT INTO 1111_0 SELECT*FROM report_0 把查询结果集插入到表中 insert into A(a,b,c) select from B(a ...

  2. 【Android】android文件的写入与读取---简单的文本读写context.openFileInput() context.openFileOutput()

    最终效果图,点击save会保存到文件中,点击show会从文件中读取出内容并显示. main.xml <?xml version="1.0" encoding="ut ...

  3. python全栈开发day65-templates：tags、母版和继承、组件、静态文件相关、simple_tag和inclusion_tag

    一.昨日内容回顾 1.MVC和MTV框架 MVC:  model 模型 存写数据   view 视图 给用户展示页面 control 控制器 负责调度 传递指令 MTV: M:model 模型  OR ...

  4. Python学习（四） —— 编码

    一.枚举 enumerate,for i in enumerate(可迭代对象),返回元组,内容是(序列号,可迭代的每一个元素)        for i,j in enumerate(可迭代对象,开 ...

  5. jdk 生成证书

    1.生成客户端的私钥,客户端的证书 1)keytool -genkey -alias clientkey -keystore kclient.keystore -validity 36500   2) ...

  6. python josn包

    Python josn包中的编码与解码方法 对于Python数据类型进行编码解码 json.dumps  对python的数据类型进行json格式编码 :(将dict转为json格式) eg: imp ...

  7. Python 豆瓣mv爬取

    爬取网址:https://www.dbmeinv.com/       豆瓣mv(现已更名) 注:自制力不好的同学,先去准备营养快线! import requests from bs4 import ...

  8. python inspect 模块 和 types 模块 判断是否是方法，模块，函数等内置特殊属性

    python inspect 模块 和 types 模块 判断是否是方法,模块,函数等内置特殊属性 inspect import inspect def fun(): pass inspect.ism ...

  9. img-html-2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 初窥Java之一

    一.常用的dos命令 打开命令提示符窗口的方式: ① win + R --> 输入cmd --> 回车 ② 开始 --> 搜索程序和文件的框中输入  cmd  --> 回车 ③ ...