关系数据可视化框架
授权协议: GPLv2 操作系统: 跨平台
开发语言: GPLv2
admin |2017-12-01

G6 是一个由纯 JavaScript 编写的关系图基础技术框架,是解决流程图和关系分析的图表库,集成了大量的交互,可以轻松的进行动态流程图和关系网络的开发。


特性

  • 易用的图形、交互拓展订制

  • 完备的 数据 -> 图形 映射语法

  • 精致的、简单的、易用的、丰富的关系图

  • 内含高效、丰富的布局算法

  • 内含基础的关系图编辑行为

支持环境

  • 现代浏览器和 IE9 及以上。

安装

浏览器引入

<script src="https://gw.alipayobjects.com/as/g/datavis/g6/1.2.0/g6.min.js"></script>

通过 npm 安装

官方提供了 G6 npm 包,通过下面的命令即可完成安装

npm install @antv/g6 --save

成功安装完成之后,即可使用 import 或 require 进行引用。

import G6 from '@antv/g6';

const net = new G6.Net({
  id: 'c1',
  width: 600,
  height: 300
});

示例代码

G6 中所有的图都由边和节点构成,只要给出节点数据,G6 就能为您绘制出关系图。

// 第三步:设置数据
      const data = {
        "nodes": [
          {
            "x": 140,
            "y": 210,
            "id": "node1"
          },
          {
            "x": 270,
            "y": 210,
            "id": "node2"
          }
        ],
        "edges": [
          {
            "source": "node1",
            "id": "edge1",
            "target": "node2"
          }
        ]
      };
      // 第四步:配置G6画布
      const net = new G6.Net({
          id: 'c1',      // 容器ID
          width: 500,    // 画布宽
          height: 500    // 画布高
        });
      // 第五步:载入数据
      net.source(data.nodes, data.edges);
      // 第六步:渲染关系图
      net.render();

版权所有:思普集团ICP备案编号:滇ICP备10002976号 ©

www.spgnux.com