|
@@ -40,13 +40,12 @@ export function getG6Options({ container = 'container' }) {
|
|
|
preventOverlap: true,
|
|
|
strictRadial: false
|
|
|
},
|
|
|
- animate: true,
|
|
|
defaultNode: {
|
|
|
size: 30,
|
|
|
style: {
|
|
|
- fill: '#fa8c16',
|
|
|
- stroke: '#000',
|
|
|
- lineWidth: 1
|
|
|
+ // fill: '#fa8c16',
|
|
|
+ // stroke: '#000',
|
|
|
+ // lineWidth: 1
|
|
|
},
|
|
|
labelCfg: {
|
|
|
style: {
|
|
@@ -75,8 +74,7 @@ export function getG6Options({ container = 'container' }) {
|
|
|
opacity: 1
|
|
|
},
|
|
|
inactive: {
|
|
|
- opacity: 0.4,
|
|
|
- fill: '#000'
|
|
|
+ opacity: 0.4
|
|
|
}
|
|
|
},
|
|
|
edgeStateStyles: {
|
|
@@ -110,6 +108,93 @@ export function getG6Options({ container = 'container' }) {
|
|
|
// graph.changeSize(container.scrollWidth, container.scrollHeight)
|
|
|
// }
|
|
|
|
|
|
+// Background Animation 节点动画
|
|
|
+G6.registerNode(
|
|
|
+ 'background-animate',
|
|
|
+ {
|
|
|
+ afterDraw(cfg, group) {
|
|
|
+ const r = cfg.size / 2
|
|
|
+ const back1 = group.addShape('circle', {
|
|
|
+ zIndex: -3,
|
|
|
+ attrs: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ r,
|
|
|
+ fill: cfg.color,
|
|
|
+ opacity: 0.6
|
|
|
+ },
|
|
|
+ // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
|
|
|
+ name: 'back1-shape'
|
|
|
+ })
|
|
|
+ const back2 = group.addShape('circle', {
|
|
|
+ zIndex: -2,
|
|
|
+ attrs: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ r,
|
|
|
+ fill: cfg.color,
|
|
|
+ opacity: 0.6
|
|
|
+ },
|
|
|
+ // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
|
|
|
+ name: 'back2-shape'
|
|
|
+ })
|
|
|
+ const back3 = group.addShape('circle', {
|
|
|
+ zIndex: -1,
|
|
|
+ attrs: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ r,
|
|
|
+ fill: cfg.color,
|
|
|
+ opacity: 0.6
|
|
|
+ },
|
|
|
+ // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
|
|
|
+ name: 'back3-shape'
|
|
|
+ })
|
|
|
+ group.sort() // Sort according to the zIndex
|
|
|
+ back1.animate(
|
|
|
+ {
|
|
|
+ // Magnifying and disappearing
|
|
|
+ r: r + 10,
|
|
|
+ opacity: 0.1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ duration: 3000,
|
|
|
+ easing: 'easeCubic',
|
|
|
+ delay: 0,
|
|
|
+ repeat: true // repeat
|
|
|
+ }
|
|
|
+ ) // no delay
|
|
|
+ back2.animate(
|
|
|
+ {
|
|
|
+ // Magnifying and disappearing
|
|
|
+ r: r + 10,
|
|
|
+ opacity: 0.1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ duration: 3000,
|
|
|
+ easing: 'easeCubic',
|
|
|
+ delay: 1000,
|
|
|
+ repeat: true // repeat
|
|
|
+ }
|
|
|
+ ) // 1s delay
|
|
|
+ back3.animate(
|
|
|
+ {
|
|
|
+ // Magnifying and disappearing
|
|
|
+ r: r + 10,
|
|
|
+ opacity: 0.1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ duration: 3000,
|
|
|
+ easing: 'easeCubic',
|
|
|
+ delay: 2000,
|
|
|
+ repeat: true // repeat
|
|
|
+ }
|
|
|
+ ) // 3s delay
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 'image'
|
|
|
+)
|
|
|
+
|
|
|
export function getMockData() {
|
|
|
const img = new Image()
|
|
|
img.src = 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg'
|
|
@@ -118,12 +203,23 @@ export function getMockData() {
|
|
|
const imgs = ['C.svg', 'Elastic.svg', 'Hadoop.svg', 'Flink.svg', 'Hive.svg', 'jaeger.svg', 'python.svg', 'Docker2.svg', 'Prometheus.svg', 'java.svg']
|
|
|
|
|
|
const nodes = imgs.map((img, i) => {
|
|
|
- return {
|
|
|
- id: String(i),
|
|
|
- label: img.split(','),
|
|
|
- type: 'image',
|
|
|
- size: [40, 40],
|
|
|
- img: '/imgs/' + img
|
|
|
+ if (i !== 4) {
|
|
|
+ return {
|
|
|
+ id: String(i),
|
|
|
+ label: img.split(','),
|
|
|
+ type: 'image',
|
|
|
+ size: [40, 40],
|
|
|
+ img: '/imgs/' + img
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return {
|
|
|
+ id: String(i),
|
|
|
+ label: img.split(','),
|
|
|
+ type: 'background-animate',
|
|
|
+ size: 30,
|
|
|
+ color: '#f00',
|
|
|
+ img: '/imgs/' + img
|
|
|
+ }
|
|
|
}
|
|
|
})
|
|
|
|
|
@@ -179,7 +275,7 @@ export function getMockData2() {
|
|
|
const img = new Image()
|
|
|
img.src = 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg'
|
|
|
|
|
|
- const imgs = ['C.svg', 'Elastic.svg', 'Hadoop.svg', 'Flink.svg', 'Hive.svg', 'jaeger.svg', 'python.svg', 'Docker2.svg', 'Prometheus.svg', 'java.svg']
|
|
|
+ const imgs = ['C.svg', 'Elastic.svg', 'Hadoop.svg', 'Flink.svg', 'Hive.svg', 'jaeger.svg', 'error.gif']
|
|
|
|
|
|
const nodes = imgs.map((img, i) => {
|
|
|
return {
|