antvG6和antvX6

admin管理员组

文章数量:1573361

1. g6有combo，x6有 parent.addChild(child)，实现combo效果，即node外面的框子；
2. g6有tooltip插件，x6用 删除 node，removeNode(node.id)，新增 node graph.addNode(node)，实现
共同的：er图布局，必须经过计算（暂未实现）

下面是在 X6 官网调试的demo 代码

import { Graph } from ‘@antv/x6’
import dagre from ‘dagre’
import { DagreLayout } from ‘@antv/layout’

const LINE_HEIGHT = 24
const NODE_WIDTH = 150

let nodes = [
{
id: 1,
shape: “er-rect”,
width: 60,
height: 40,
label: Child - 1,
zIndex: 1,
attrs: {
body: {
stroke: ‘none’,
fill: #211,
cursor: “auto”,
},
label: {
fill: ‘#fff’,
fontSize: 12,
cursor: “auto”,
},
},
},
{
id: 2,
shape: “er-rect”,
width: 60,
height: 40,
label: Child - 2,
zIndex: 1,
attrs: {
body: {
stroke: ‘none’,
fill: #422,
cursor: “auto”,
},
label: {
fill: ‘#fff’,
fontSize: 12,
cursor: “auto”,
},
},
},
{
id: 3,
shape: “er-rect”,
width: 60,
height: 40,
label: Child - 3,
zIndex: 1,
attrs: {
body: {
stroke: ‘none’,
fill: #633,
cursor: “auto”,
},
label: {
fill: ‘#fff’,
fontSize: 12,
cursor: “auto”,
},
},
},
{
id: 4,
shape: “er-rect”,
width: 60,
height: 40,
label: Child - 4,
zIndex: 1,
attrs: {
body: {
stroke: ‘none’,
fill: #844,
cursor: “auto”,
},
label: {
fill: ‘#fff’,
fontSize: 12,
cursor: “auto”,
},
},
},
{
id: 5,
shape: “er-rect”,
width: 60,
height: 40,
label: Child - 5,
zIndex: 1,
attrs: {
body: {
stroke: ‘none’,
fill: #1055,
cursor: “auto”,
},
label: {
fill: ‘#fff’,
fontSize: 12,
cursor: “auto”,
},
},
},
{
id: 6,
shape: “er-rect”,
width: 60,
height: 40,
label: Child - 6,
zIndex: 1,
attrs: {
body: {
stroke: ‘none’,
fill: #1266,
cursor: “auto”,
},
label: {
fill: ‘#fff’,
fontSize: 12,
cursor: “auto”,
},
},
},
{
id: 7,
shape: “er-rect”,
width: 60,
height: 40,
label: Child - 7,
zIndex: 1,
attrs: {
body: {
stroke: ‘none’,
fill: #1477,
cursor: “auto”,
},
label: {
fill: ‘#fff’,
fontSize: 12,
cursor: “auto”,
},
},
},
{
id: 8,
shape: “er-rect”,
width: 60,
height: 40,
label: Child - 8,
zIndex: 1,
attrs: {
body: {
stroke: ‘none’,
fill: #1688,
cursor: “auto”,
},
label: {
fill: ‘#fff’,
fontSize: 12,
cursor: “auto”,
},
},
},
{
id: 9,
shape: “er-rect”,
width: 60,
height: 40,
label: Child - 9,

本文标签： AntV