antvis / g6 Goto Github PK

View Code? Open in Web Editor NEW

10.7K 219.0 1.3K 852.23 MB

♾ A Graph Visualization Framework in JavaScript.

Home Page: https://g6.antv.antgroup.com/

License: MIT License

JavaScript 17.68% TypeScript 82.18% Less 0.01% Shell 0.01% HTML 0.13%

graph-drawing tree network graph visualization data-visualization graph-visualization visual-analytics graph-analytics

g6's Issues

关于插入图片

定义的节点image只支持http开头的吗，我写本地的不好用

`
addImage.on('click',function(ev){
net.beginAdd('node',{
shape:'china.png'//这个位置如果换成加http的是好使得
}) })

能否将节点的文本编辑功能实现提前

现有关系图在文字编辑上面实现比较麻烦，而且没有官方的统一设计方案或接口，是否可以将此功能提前，谢谢。

smoothArrow连接固定不变

针对自定义的图形，是不是在使用smoothArrow连接两个图形的锚点时，图形的位置发生改变，但是线的连接点连接的还是当初的锚点，不会跟着一起改变

updateAnchor怎么用

updateAnchor怎么用，在api里面没有看到相关讲解，我想控制指定某个锚点可连线和不可连线

如何重新布局？

你好，我参照官方示例进行布局，如下所示。但是我的需求会动态添加/删除一些 node 和 edge，请问一下如何触发重新布局呢？

var Layout = G6.Layout;
var margin = 60;
var height = 800 - 2 * margin;
var width = 500 - 2 * margin;
var nodes = data.nodes;
var edges = data.edges;
var layout = new Layout.Flow({
  nodes: nodes,
  edges: edges
});
nodes = layout.getNodes();
nodes.map(function(node) {
  var x = node.x * width + margin;
  var y = node.y * height + margin;
  node.x = y;
  node.y = x;
});

自定义图形删除当前对象产生的BUG

是这样的，我自定义图形，在里面增加一个删除按钮，点击即删除当前图形，然而在图形没有拖动的情况删除是没有问题，一但图形移动了，再点删除按钮，就会报错，然后在拖动其他图形就不行了

BUG代码示例
https://codepen.io/anon/pen/eENLab

动画

在更新添加删除数据模型的时候能不能提供个动画接口啊

例如： graph.update(item, model,animate = true)

如何添加节点内局部自定义事件

非常喜欢 G6 ，给项目组点赞。

我想要捕获节点的局部点击事件，请问一下如何实现呢？我们要实现一个自定义节点，捕获类似 tree 节点右侧的 "+" 号的点击事件。目前从文档和示例来看，只能获取到 node 和 edge 这个级别的事件。

节点的拖动能否提供类似ppt那种对齐提示

当图中有多个节点时，添加一个节点能提示对齐线，类似PPT，可以与相近位置的横向或竖向进行对齐

graph.on('afterAdd', function(ev){}) no effect

afterAdd事件无论beginAdd还是add都没有产生

撤销功能最多可以撤销几步

撤销功能是不是最多可以撤销4步，是否支持撤销到初始化状态，是否可以支持设置撤销几步，有没有这个打算

文档有误

使用教程 - 自定义图形介绍内部自定义节点有 4 种，而 API - G6 说有 7 种。

graph.edge().color(dim, fun) 边颜色映射
graph.edge().size(dim, fun) 边大小映射
graph.edge().shape(dim, fun) 边形状映射
graph.edge().label(dim, fun) 边文本映射
graph.edge().style(dim, fun) 样式映射
graph.edge().tooltip(dim, fun) 提示信息映射

这一系列方法参数是否应该直接是(edge) => {} ?node()同理，为什么不直接把对象暴露出来呢？

在自定义节点里添加一个菱形会报错

G6.registNode("compositeNode", {
  draw: function(cfg, group) {
    var shape = group.addShape("rect", {
      attrs: {
        x: cfg.x - 60,
        y: cfg.y - 30,
        width: 120,
        height: 60,
        fill: "#fff",
        stroke: "lightblue"
      }
    });
    group.addShape("rhombus");
    group.addShape("text", {
      attrs: {
        x: cfg.x,
        y: cfg.y,
        fill: "black",
        text: "自定义图形",
        textAlign: "center"
      }
    });
    return shape;
  },
  getAnchorPoints: function() {
    return [[0.5, 0], [1, 0.5], [0.5, 1], [0, 0.5]];
  }
});

我想组合一个自定义节点里面有矩形和菱形。但是这样会报错

Uncaught TypeError: u[r] is not a constructor

把 group.addShape("rhombus"); 去掉就好了

codepen demo

节点中可以存储节点

节点可以作为容器，可以为容器节点添加子节点，可以获取容器节点下的子节点数组，当容器节点移动时子节点一起移动，可以单独选择子节点。

锚点连接问题

能不能处理以下两种情况
1，一个锚点连接过一次就不能进行第二次连接了
2，控制一个图形左侧的锚点不能和另外一个图形左侧的锚点进行连接

关于 group 和 shape 的 api

在示例中看到如下的用法

nameGroup.addShape('text', {
  attrs:{
    x: x,
    y: y + 20 * i,
    text: field.name,
    fill: '#333',
    textBaseline: 'top'
  }
});

或

splitLine = group.addShape('line', {
  attrs: {
    stroke: '#fff'
  }
});

关于 group 和 shape 的用法，比如支持哪些 attrs，在官网文档没有找到，可以补充一下吗。

请问有没有支持antd的解决方案？

能否提供一些示例

官网能否提供一些示例，包括前进，后退，文本输入

在编辑模式下，如果默认没有任何数据，则添加的节点没有x,y坐标。

离屏的canvas 该如何放入 g6 group里面

G6 0.X -> G6 1.0 升级指南

概述

该文档是 G6 0.X -> G6 1.0 的升级指南文档，如果有你觉得描述的不够清晰的地方，升级有困难的话，敬请联系我们！

原来的 Graph 既是现在的 Net
新的锚点描述
再见无穷尽的xxxable
调整初始化视口应该用fitView
统一输入输出 save && read

原来的 Graph 既是现在的 Net

Graph 在 G6 1.0 中已经沉为抽象类，用户不应该直接实例化 Graph 使用。1.0 中 Net 基本含 0.X Graph 所有属性、方法。从 0.X 迁 1.X 的用户应将所有的 Graph 改为 Net。

新的锚点描述

锚点在关系图中无非是一个至关重要的概念，如果 0.X 中你使用了自定义锚点，应参看下文。

过去的锚点，我们定义了上（0）右（1）下（2）左（3），四个边，然后在通过第二个参数确定锚点的位置，如左图所示。这样不仅理解起来复杂，而且还有一个硬伤 —— 锚点无法定义到图形上！在新的锚点机制里，我们以左上角为（0，0）点，将锚点的范围拓展至了整个图形的包围盒平面内，如右图所示：

这样我们不仅能把锚点定义到图形包围盒边上，还能定义到包围盒内图，以做到锚点跟图形精确关联，如下图所示：

再见无穷尽的xxxable

诸如：selectable、dragable、zoomable，在 1.0 后，应用行为模式的交互插拔机制实现，比如：

0.X 中

var graph = new Graph({
  zoomable: false
});

等于 1.X 中

var net = new Net();
net.removeBehaviour(['wheelZoom']);

行为、模式的插拔组装，参见Demo;

调整初始化视口应该用fitView

0.x 中有时我们会render结束后，调用autoZoom方法，让图适应画布。1.X 中这种方法被废弃，需要在初始化图时配置fitView，以决定初始化时画布的视口。Graph API，fitView 属性。

统一输入输出 save && read

在使用关系图开发的过程中，我们常常需要导出导入数据，以满足关系图的存储、分享、编辑的功能。0.X 中 graph.save 和 graph.srouce 并没有严格对照。 G6 1.0 后，我们对这部分的需求做了总结。在 Graph 定义了一对相互对照的接口，read <==> save，后面用户应该严格通过这两个该接口导入导出数据。

读入数据 -- read

/**
 * 导入数据
 * @param  {Object}  data   通过save导出的数据
 */
graph.read(data);

保存数据 -- save

/**
 * 导出数据
 * @return  {Object}  data  导出的数据
 */
graph.save();

api是不是有错误，想确认一下

https://antv.alipay.com/g6/doc/tutorial/start/custom-shape.html

关于removeBehaviour方法失效

hi
我的流程是这样的：
进入页面后，默认是complicated模式，点击“编辑”按钮后，切换到“edit”模式，我初始化net的时候，没有设置默认的“modes”字段。
现在的问题是：切换到“edit”模式后，双击画布报错，错误原因是“shortcut”这个行为。
我现在这样做：

function openEdit() {
  console.log('进入编辑模式');

  net.changeMode('edit');
  net.removeBehaviour('shortcut', 'edit');
  net.removeBehaviour('clickActive', 'edit');
}

但是双击画布以后还是会报错。
或者麻烦告诉我你们默认设置的“edit”模式都包括什么行为？我自定义一下“modes”字段。

g6 跟 g2 如何兼容 IE9

g6是否提供了可以自己定义函数方式的接口

g6是否提供了可以自己定义函数方式的接口，这样如果g6有不完善的地方，开发者可以自己定义一下方法尤其是和canvas相关的

Tree有办法可以方便的翻转所有边吗

Tree 的direction 只能改变布局方向，没法改变边的指向，类似晋级赛这种图是从children指向parent的，现在g6有api实现这样的效果吗?
@leungwensen

确认api关于锚点坐标描述是否有误

在线编辑工具特别卡，是不是可以优化一下

在线编辑工具特别卡，是不是可以优化一下，还是我这边的网络有问题

重做是一个什么功能，点击没有太大反应，跟返回差不多

链接有问题

此处自定义图形链接有问题

什么时候可以提供给外部同学NPM使用？

关于g6 net数据大的问题

在之前数据库表的基础上做了一个模拟数据，到1000张左右的时候会比较卡，请问如何处理数据量大的问题呢？
`$(function () {

    var dataObj = {
        nodes: [],
        edges: [],
    };

    for (var i = 0; i < 1500; i++) {
        var nodesObj = {
            "shape": "table",
            "x": Math.floor(Math.random() * 9999),
            "y": Math.floor(Math.random() * 9999),
            "id": "d62q1519",
            "title": "Division",
            "type": "B",
            "fields": [
                {
                    "name": "Employee number",
                    "type": "Numberic(5)",
                    "key": "<pk>"
                },
                {
                    "name": "Emp_Employee number",
                    "type": "Numberic(5)",
                    "key": "<fk1>"
                },
                {
                    "name": "Division",
                    "type": "Numberic(5)",
                    "key": "<fk2>"
                },
                {
                    "name": "FirstName",
                    "type": "Chart(30)",
                    "key": ""
                }
            ]
        };
        var edgesObj = {
            "shape": "arrow",
            "source": "d62d1569",
            "id": "d6cb23c5",
            "target": "d62d1519",
            "controlPoints": [
                {
                    "x": Math.floor(Math.random() * 9999),
                    "y": Math.floor(Math.random() * 9999)
                },
                {
                    "x": Math.floor(Math.random() * 9999),
                    "y": Math.floor(Math.random() * 9999)
                },
                {
                    "x": Math.floor(Math.random() * 9999),
                    "y": Math.floor(Math.random() * 9999)
                }
            ],
            "relation": "service",
            "sourceAnchor": 2
        };
        edgesObj.source = edgesObj.target = nodesObj.id = Math.random().toString(36).substr(2);
        edgesObj.id = Math.random().toString(36).substr(2);

        dataObj.nodes.push(nodesObj);
        dataObj.edges.push(edgesObj);
    }

    var Util = G6.Util;
    G6.registNode('table', {
        draw: function (cfg, group) {
            var x = cfg.x;
            var y = cfg.y;
            var origin = cfg.origin;
            var fields = origin.fields;
            var backRect = group.addShape('rect', {
                attrs: {
                    stroke: 'blue',
                    fill: cfg.color
                }
            });
            var nameGroup = group.addGroup();
            var typeGroup = group.addGroup();
            var keyGroup = group.addGroup();
            var lineHeight = 20;
            var marginRight = 10;
            var padding = 6;
            var l = fields.length;
            var fontHeight;
            var anchorPoints = [];
            var title;
            var titleBox;
            var nameBox;
            var typeBox;
            var keyBox;
            var width;
            var height;
            var splitLine;
            title = group.addShape('text', {
                attrs: {
                    x: x,
                    y: y,
                    text: origin.title,
                    fill: '#333',
                    textBaseline: 'top',
                    textAlign: 'center'
                }
            });
            splitLine = group.addShape('line', {
                attrs: {
                    stroke: '#fff'
                }
            });
            Util.each(fields, function (field, i) {
                nameGroup.addShape('text', {
                    attrs: {
                        x: x,
                        y: y + 20 * i,
                        text: field.name,
                        fill: '#333',
                        textBaseline: 'top'
                    }
                });
                typeGroup.addShape('text', {
                    attrs: {
                        x: x,
                        y: y + 20 * i,
                        text: field.type,
                        fill: '#333',
                        textBaseline: 'top'
                    }
                });
                keyGroup.addShape('text', {
                    attrs: {
                        x: x,
                        y: y + 20 * i,
                        text: field.key,
                        fill: '#333',
                        textBaseline: 'top'
                    }
                });
            });
            titleBox = title.getBBox();
            nameBox = nameGroup.getBBox();
            typeBox = typeGroup.getBBox();
            keyBox = keyGroup.getBBox();
            width = nameBox.width + typeBox.width + keyBox.width + 3 * marginRight + 2 * padding;
            height = Math.max(nameBox.height, typeBox.height, keyBox.height) + 4 * padding + titleBox.height;
            fontHeight = nameGroup.get('children')[0].getBBox().height;
            title.translate(0, -height / 2 + padding);
            nameGroup.translate(-width / 2 + padding, -height / 2 + titleBox.height + 3 * padding);
            typeGroup.translate(-width / 2 + nameBox.width + marginRight + padding, -height / 2 + titleBox.height + 3 * padding);
            keyGroup.translate(-width / 2 + nameBox.width + typeBox.width + 2 * marginRight + padding, -height / 2 + titleBox.height + 3 * padding);
            splitLine.attr({
                x1: cfg.x - width / 2,
                y1: cfg.y - height / 2 + 2 * padding + titleBox.height,
                x2: cfg.x + width / 2,
                y2: cfg.y - height / 2 + 2 * padding + titleBox.height
            });
            backRect.attr({
                x: x - width / 2,
                y: y - height / 2,
                width: width,
                height: height,
                stroke: 'blue',
                fill: cfg.color
            });
            Util.each(fields, function (field, i) {
                var r = ( titleBox.height + i * (nameBox.height + lineHeight - fontHeight) / l + fontHeight / 2 + 3 * padding) / height;
                anchorPoints.push([0, r]);
                anchorPoints.push([1, r]);
            });
            group.set('anchorPoints', anchorPoints);
            return backRect;
        },
        getAnchorPoints: function (cfg, group) {
            var anchorPoints = group.get('anchorPoints');
            anchorPoints.unshift([0.5, 0]);   // 上中
            anchorPoints.push([0.5, 1]);      // 下中
            return anchorPoints;
        }
    });
    var net = new G6.Net({
        id: 'c1',            // 容器ID
        height: 900,         // 画布高
        fitView: 'autoZoom', // 自动缩放
        grid: {
            cell: 10           // 网格大小
        }
    });
    net.source(dataObj.nodes, dataObj.edges);
    net.node().color('type', function (val) {
        if (val === "B") {
            return G6.Global.colors[0];
        }
        if (val === "C") {
            return G6.Global.colors[1];
        }
    });
    net.edge().label('relation');
    net.render();
});`

npm install @antv/g6

我自定义了几个图标，代码大致如下：

// 注册一个路由器的图标
G6.registNode('router', {
  draw: function(cfg, group) {
    group.addShape('path', {
      attrs: {
        path: 'M0 12.3 V28.9 A 24.9 11.0 0 1 0 49.8 28.9 V12.3 Z',
        fill: '#dbdde1'
      }
    });
    group.addShape('ellipse', {
      attrs: {
        x: 24.9,
        y: 12.3,
        rx: 24.9,
        ry: 12.3,
        fill: '#e2e4e9'
      }
    });
    group.addShape('ellipse', {
      attrs: {
        x: 24.9,
        y: 12.3,
        rx: 23.5,
        ry: 11.6,
        fill: '#eeeff2'
      }
    });
    group.addShape('path', {
      attrs: {
        path: 'M2.3,10.1 L4.6,7.9 L16.5,9.6 L17.7,8.6 L20.5,11.7 L12.4,13.5 L13.6,12.2Z M24.8,10.0 L28.3,6.9 L26.4,6.4 L34.6,4.3 L34.1,7.6 L31.7,7.4 L27.9,11.1Z M28.0,12.7 L35.7,11.4 L34.6,12.5 L46.0,14.8 L43.8,16.9 L31.7,14.1 L29.6,16.2Z M20.7,13.9 L24.3,14.5 L20.0,18.5 L22.6,19.3 L14.6,20.8 L14.3,17.2 L16.5,17.7Z',
        fill: '#e85464'
      }
    });
    return group.addShape('rect', {
      attrs: {
        x: 0,
        y: 0,
        width: 49.8,
        height: 40
      }
    });
  },
  afterDraw: function(cfg, group, router) {
    cfg.size = 10
    group.addShape('text', {
      attrs: {
        x: 20,
        y: 51.3,
        fontFamily: '宋体',
        text: cfg.label,
        stroke: '#000',
        textAlign: 'center'
      }
    });
  },
  getAnchorPoints: function(cfg, group) {
    return [
      [0.5, 1], // 上面边的中点
      [1, 0.5], // 右边边的中点
      [0.5, 0], // 下边边的中点
      [0, 0.5] // 左边边的中点
    ]
  }
});

然后我渲染的数据如下：

var nodes = [
  {
    "id": "595b5e7e1d41c86f00adc371",
    "name": "switch_center",
    "host_id": "switch_center",
    "node_ip": "10.10.2.1",
    "node_type": "05401202",
    "linked": "1",
    "weight": 40,
    "y": 358.36920299208396,
    "x": 636.8554312518343,
    "shape": "router"
  },
  .....
]

结果是，这一类图标渲染出来的位置在坐标原点。