g6入门

<template>

    <div id="mountNode"></div>
</template>

<script>
    export default {
        name:'g6'
    }
</script>
<script setup>
import G6 from '@antv/g6';
import { onMounted } from 'vue';

const data = {
  nodes: [
    { id: 'node0', size: 50,label:'榴弹' },
    { id: 'node1', size: 30,label:'榴弹1',isLeaf: true  },
    { id: 'node2', size: 30, label:'榴弹2',isLeaf: true },
    { id: 'node3', size: 30,label:'榴弹3',isLeaf: true },
    { id: 'node4', size: 30, label:'榴弹4',isLeaf: true },

  ],
  edges: [
    { source: 'node0', target: 'node1' },
    { source: 'node0', target: 'node2' },
    { source: 'node0', target: 'node3' },
    { source: 'node0', target: 'node4' },

  ],
};

let layout = {
    type: 'force',
    center: [ 200, 200 ],     // 可选，默认为图的中心
    animate:true,
    preventOverlap: true,
    linkDistance: (d) => {
      if (d.source.id === 'node0') {
        return 100;
      }
      return 30;
    },
    nodeStrength: (d) => {
      if (d.isLeaf) {
        return -50;
      }
      return -10;
    },
    edgeStrength: (d) => {
      if (d.source.id === 'node1' || d.source.id === 'node2' || d.source.id === 'node3') {
        return 0.7;
      }
      return 0.1;
    },
    
}

const  init = ()=>{
    const container = document.getElementById('mountNode');
    const width = container.scrollWidth|| 500;
    const height = container.scrollHeight || 500;
    const graph = new G6.Graph({
    container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
    width: width, // Number，必须，图的宽度
    height: height, // Number，必须，图的高度
    layout,
    modes: {
    default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 允许拖拽画布、放缩画布、拖拽节点
  },
});
    graph.data(data); // 读取 Step 2 中的数据源到图上

    graph.render(); // 渲染图
    hidden(graph)
    let flag = true
    // 鼠标点击节点，隐藏该节点
    graph.on('node:click', (ev) => {
    const node = ev.item;
    if(flag){
        show(graph)
       
    }else{
        hidden(graph)
    }
    flag = !flag
    graph.paint();
    console.log('after hide(), the node visible = ', node.get('visible'));
    });
}

onMounted(()=>{
    init()
})

const hidden = (graph)=>{
    const nodes = graph.getNodes();
    nodes.forEach((node) => {
        if(node._cfg.id!=='node0'){
            node.hide();
        }
    });
    const edges = graph.getEdges();
    edges.forEach((edge) => {
    edge.hide();
    });
}

const show = (graph)=>{
    const nodes = graph.getNodes();
    const edges = graph.getEdges();
    nodes.forEach((node) => {
        node.show();
    });
    edges.forEach((edge) => {
    edge.show();
  });
}

</script>

<style lang="less" scoped>

</style>

注意点

• vue中需要在生命周期函数中初始化
• const nodes = graph.getNodes(); 获取所有node
• const edges = graph.getEdges(); 获取边
• hide 和 show 显示隐藏

• type: 'force', 力图