Comments (2)
请提供相关 demo
from g6.
请提供相关 demo
使用图例写的一个demo如下
import G6 from '@antv/g6';
fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
.then((res) => res.json())
.then((data) => {
const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.TreeGraph({
container: 'container',
width,
height,
linkCenter: true,
modes: {
default: [
// {
// type: 'collapse-expand',
// onChange: function onChange(item, collapsed) {
// const data = item.getModel();
// data.collapsed = collapsed;
// return true;
// },
// },
'drag-canvas',
'zoom-canvas',
],
},
defaultNode: {
size: 26,
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
},
defaultEdge: {
type: 'cubic-vertical',
},
layout: {
type: 'compactBox',
direction: 'TB',
getId: function getId(d) {
return d.id;
},
getHeight: function getHeight() {
return 16;
},
getWidth: function getWidth() {
return 16;
},
getVGap: function getVGap() {
return 80;
},
getHGap: function getHGap() {
return 20;
},
},
});
graph.node(function (node) {
let position = 'right';
let rotate = 0;
if (!node.children) {
position = 'bottom';
rotate = Math.PI / 2;
}
return {
label: node.id,
labelCfg: {
position,
offset: 5,
style: {
rotate,
textAlign: 'start',
},
},
};
});
//临时点击节点删除,请点击中间节点进行测试场景(实际会有菜单进行点击删除)
graph.on('node:click',(e) => {
//删除当前节点,并将子节点全部交给父节点,使用updateChidren直接更新父节点的子树
const {item} = e;
console.log('item:',item)
const newChildren = item?._cfg?.children?.map(child => {
const curItem = child.getModel();
return curItem;
// return {...curItem, id: curItem.id + '-'} //更换新id
});
const curChildren = item?._cfg?.parent?._cfg?.children?.map(child => child.getModel())?.filter(c => c.id !== item?._cfg?.id);
const parentId = item?._cfg?.parent?._cfg?.id;
graph.updateChildren([...curChildren,...newChildren],parentId)
})
graph.data(data);
graph.render();
graph.fitView();
if (typeof window !== 'undefined')
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
});
from g6.
Related Issues (20)
- 如何恢复被批量更新的自定义节点的样式 HOT 2
- 5.0版本动态添加元素边,拖拽和缩放画布之后边错位,如果在新增边也是错位的 HOT 1
- Custom React Node with zoom-canvas and drag-canvas displaces the node. HOT 4
- 树图TreeGraph首次render时先触发了afterrender事件 HOT 1
- [v5] Calling render while an existing render is happening causes force layout to flash HOT 1
- gForce 布局,没有设置 preset 依然显示 HOT 1
- Cannot read properties of undefined (reading 'Graph') HOT 2
- Method not implemented. 报错。 HOT 4
- [V5] label 使用padding并且折行的情况下,background宽度不能覆盖全部文字内容 HOT 1
- 【5.x】边选中有偏差 HOT 1
- 【V5】5.0.9 combo updateComboData 更新 icon/badge 等不生效
- cursor 状态不会自动变化 HOT 1
- dagre布局下的combo,如何设置固定宽度,高度由内容自动撑开,或者有api实现节点换行吗
- V5.0.9 自定义节点展开 收缩有问题 HOT 2
- 【V5】树布局中,节点高度不固定的情况下,getHeight按节点实际高度设置,会出现节点布局重叠问题
- 树布局中如何在getWidth中获取节点的宽高
- [V5] hover-activate behavior makes expand/collapse combo breaking HOT 1
- [V5]拖动Custom React Node后,连线错乱 HOT 1
- 【V5】5.0.10 click-select behavior 双击节点后 选择失效 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from g6.