<!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. LoadRunner中 host-mapping的Capture Level说明

    lr录制后空白,那么就要弄明白lr中host-mapping的Capture Level选项socket level data.winnet level data.socket level andwi ...

  2. sql的with as用法

    http://www.cnblogs.com/linjiqin/archive/2013/06/24/3152667.html

  3. 【JavaScript】underscore

    例: 'use strict'; _.map([1, 2, 3], (x) => x * x); // [1, 4, 9] No1: [every/some] 当集合的所有元素都满足条件时,_. ...

  4. Postman 使用技巧之多环境测试及接口依赖关系处理

    一.前言 在日常开发中,除了正常的单元测试,某些情况我们还需要测试 HTTP 接口,团队中目前使用的是「 Postman 」这款 API调试 . HTTP 请求工具.通常我们将经常要测试的接口按照项目 ...

  5. 安装win7出现安装程序无法创建新的系统分区

    安装win7的时候出现“安装程序无法创建新的系统分区 也无法定位系统分区”! 我是直接把一个系统碟里面的安装文件全部拷出来.放到要安装系统的机器(D盘).用的是老毛桃的winpe已经安装好了.我的安装 ...

  6. django-debug-toolbar和Django 日志配置

    django-debug-toolbar介绍 django-debug-toolbar 是一组可配置的面板,可显示有关当前请求/响应的各种调试信息,并在单击时显示有关面板内容的更多详细信息. gith ...

  7. Django之ORM字段和字段参数

    ORM介绍 ORM概念 ORM由来 ORM的优势 ORM的劣势 ORM总结 Django中的ORM Django项目使用MySQL数据库 Model 快速入门 字段 自定义字段 字段参数 Model ...

  8. 2019-1-9 c#时间格式

    DateTime now=DateTime.Now; //获取拼接形式的,精确到毫秒 now.ToString("yyyyMMddHHmmssfff"); //获取时间戳 自公元0 ...

  9. Java笔记（十四） 并发基础知识

    并发基础知识 一.线程的基本概念 线程表示一条单独的执行流,它有自己的程序计数器,有自己的栈. 1.创建线程 1)继承Thread Java中java.lang.Thread这个类表示线程,一个类可以 ...

  10. 潭州课堂25班：Ph201805201 django 项目 第二十课 数据库分析设计图 (课堂笔记）

    https://www.dbdesigner.net/