antvis / g6 Goto Github PK
View Code? Open in Web Editor NEW♾ A Graph Visualization Framework in JavaScript.
Home Page: https://g6.antv.antgroup.com/
License: MIT License
♾ A Graph Visualization Framework in JavaScript.
Home Page: https://g6.antv.antgroup.com/
License: MIT License
当图中有多个节点时,添加一个节点能提示对齐线,类似PPT,可以与相近位置的横向或竖向进行对齐
我希望点击一个节点改变这个节点的一些样式 onClick事件里应该怎样写呢?是改变节点属性然后graph.refresh/update吗?
最开始我的想法是graph.edge().style('id', id => id === activeId ? 'custom-style': '')
但是发现我在onClick里面写什么都不会重新设置一遍style
现在有点蒙 不知道应该是具体用什么思路搞这件事
RT
"edges": [
{
"type": "type1",
"source": "系统一",
"id": "32cb9f22",
"value": 30,
"active": true,
"target": "系统二"
}
]
RT
能不能处理以下两种情况
1,一个锚点连接过一次就不能进行第二次连接了
2,控制一个图形左侧的锚点不能和另外一个图形左侧的锚点进行连接
目前官方API看没有,不知道是否是我理解没到位,求解答
在更新 添加 删除 数据模型的时候 能不能 提供个动画 接口啊
例如 : graph.update(item, model,animate = true)
在测试中没发现什么问题,请问是否官方为做i9兼容性测试
撤销功能是不是最多可以撤销4步,是否支持撤销到初始化状态,是否可以支持设置撤销几步,有没有这个打算
定义的节点image只支持http开头的吗,我写本地的不好用
`
addImage.on('click',function(ev){
net.beginAdd('node',{
shape:'china.png'//这个位置如果换成加http的是好使得
}) })
`
g6是否提供了可以自己定义函数方式的接口,这样如果g6有不完善的地方,开发者可以自己定义一下方法尤其是和canvas相关的
是这样的,我自定义图形,在里面增加一个删除按钮,点击即删除当前图形,然而在图形没有拖动的情况删除是没有问题,一但图形移动了,再点删除按钮,就会报错,然后在拖动其他图形就不行了
安装的版本是:
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"
},
.....
]
结果是,这一类图标渲染出来的位置在坐标原点。
现有关系图在文字编辑上面实现比较麻烦,而且没有官方的统一设计方案或接口,是否可以将此功能提前,谢谢。
节点可以作为容器,可以为容器节点添加子节点,可以获取容器节点下的子节点数组,当容器节点移动时子节点一起移动,可以单独选择子节点。
非常喜欢 G6 ,给项目组点赞。
我想要捕获节点的局部点击事件,请问一下如何实现呢?我们要实现一个自定义节点,捕获类似 tree 节点右侧的 "+" 号的点击事件。目前从文档和示例来看,只能获取到 node 和 edge 这个级别的事件。
updateAnchor怎么用,在api里面没有看到相关讲解,我想控制指定某个锚点可连线和不可连线
在节点和连接线的文本不能编辑,最好在框架内置提供,并且可以扩展文本位置,文本样式等。
afterAdd事件无论beginAdd还是add都没有产生
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"); 去掉就好了
Tree 的direction 只能改变布局方向,没法改变边的指向,类似晋级赛这种图是从children指向parent的,现在g6有api实现这样的效果吗?
@leungwensen
endAdd {Function}结束添加元素会在什么时候用的到
在示例中看到如下的用法
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,在官网文档没有找到,可以补充一下吗。
在线编辑工具特别卡,是不是可以优化一下,还是我这边的网络有问题
刚刚体验了g6,赞!
是否也有react版本?
hi
我的流程是这样的:
进入页面后,默认是complicated模式,点击“编辑”按钮后,切换到“edit”模式,我初始化net的时候,没有设置默认的“modes”字段。
现在的问题是:切换到“edit”模式后,双击画布报错,错误原因是“shortcut”这个行为。
我现在这样做:
function openEdit() {
console.log('进入编辑模式');
net.changeMode('edit');
net.removeBehaviour('shortcut', 'edit');
net.removeBehaviour('clickActive', 'edit');
}
但是双击画布以后还是会报错。
或者麻烦告诉我你们默认设置的“edit”模式都包括什么行为?我自定义一下“modes”字段。
示例里面的脑图编辑器要如何删除节点?
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()同理,为什么不直接把对象暴露出来呢?
在 API - Util 页面的示例代码错误,如下图
there is no d.ts file.
g6 跟 g2 如何兼容 IE9
使用教程 - 自定义图形 介绍内部自定义节点有 4 种, 而 API - G6 说有 7 种。
你好,我参照官方示例进行布局,如下所示。但是我的需求会动态添加/删除一些 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;
});
能不能提供手动控制缩放倍数的API
在之前数据库表的基础上做了一个模拟数据,到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();
});`
该文档是 G6 0.X -> G6 1.0 的升级指南文档,如果有你觉得描述的不够清晰的地方,升级有困难的话,敬请联系我们!
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)点,将锚点的范围拓展至了整个图形的包围盒平面内,如右图所示:
这样我们不仅能把锚点定义到图形包围盒边上,还能定义到包围盒内图,以做到锚点
跟图形精确关联,如下图所示:
诸如:selectable
、dragable
、zoomable
,在 1.0 后,应用行为模式的交互插拔机制实现,比如:
0.X 中
var graph = new Graph({
zoomable: false
});
等于 1.X 中
var net = new Net();
net.removeBehaviour(['wheelZoom']);
行为、模式的插拔组装,参见Demo;
0.x 中有时我们会render
结束后,调用autoZoom
方法,让图适应画布。1.X 中这种方法被废弃,需要在初始化图时配置fitView
,以决定初始化时画布的视口。Graph API,fitView 属性。
在使用关系图开发的过程中,我们常常需要导出导入数据,以满足关系图的存储、分享、编辑的功能。0.X 中 graph.save
和 graph.srouce
并没有严格对照。 G6 1.0 后,我们对这部分的需求做了总结。在 Graph 定义了一对相互对照的接口,read <==> save,后面用户应该严格通过这两个该接口导入导出数据。
/**
* 导入数据
* @param {Object} data 通过save导出的数据
*/
graph.read(data);
/**
* 导出数据
* @return {Object} data 导出的数据
*/
graph.save();
如题,文档找不到(modes 参数如何配置)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.