antv G6 vue2简单示例

Lucy-

已于 2024-11-21 17:37:07 修改

阅读量695

点赞数 4

文章标签： javascript 前端

于 2024-11-21 17:14:49 首次发布

本文链接：https://blog.csdn.net/lm1022/article/details/143950404

版权

涉及点：

布局自定义左右侧
点击节点获取节点信息以及跳转网页
移动鼠标到节点展示光晕效果
鼠标右键点击节点出现菜单可以进行操作
提示框
标签居中，长度过长时换行
对画布及图形的缩放

1. 布局自定义左右侧

    getSide: (d) => {
            if (d.id === 'node-1') {
              return 'left';
            }
            return 'right';
          },

2. 点击节点获取节点信息以及跳转网页

   graph.on('node:click', (e: any) => {
        const id = e.target.id;
        const node = graph.getNodeData(id);
        console.log('打印节点信息node', node);
        window.open(`https://www.baidu.com/?${node.label}`, '_blank');
      });

3. 移动鼠标到节点展示光晕效果

      graph.on(NodeEvent.POINTER_ENTER, (e: any) => {
        graph.setElementState({ [e.target.id]: 'active' });
      });

4.鼠标右键点击节点出现菜单可以进行操作

 plugins: [
    {
      type: 'contextmenu',
      trigger: 'contextmenu', // 'click' or 'contextmenu'
      onClick: (v) => {
        alert('You have clicked the「' + v + '」item');
      },
      getItems: () => {
        return [
          { name: '展开一度关系', value: 'spread' },
          { name: '查看详情', value: 'detail' },
        ];
      },
      enable: (e) => e.targetType === 'node',
    },
  ],

5. 提示框

 {
            type: 'tooltip', //提示框
            getContent: (e, items) => {
              let result = `<h4>Custom Content</h4>`;
              items.forEach((item) => {
                result += `<p>Type: ${item.data.description}</p>`;
              });
              return result;
            },

6. 标签居中，长度过长时换行

 style: {
            labelPlacement: 'center',
            labelText: (d) => d.label,
            labelMaxWidth: '80%',
            labelWordWrap: true,
            labelMaxLines: 2,
          },

7.对画布及图形的缩放

'zoom-canvas'：表示允许对画布进行缩放操作。'drag-canvas'：表示允许通过拖动来移动整个画布。'drag-element'：表示允许拖动图形中的元素（可能是节点或边）。

        behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],

效果图：

开箱即用代码：

VUE文件：

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

<script>
import { Graph, NodeEvent } from '@antv/g6';
import { data } from './assets/ts/nodeData';

export default {
  name: 'Demo',
  mounted() {
    const container = document.getElementById('container');
    if (container) {
      const graph = new Graph({
        container: container,
        data: data,
        layout: {
          type: 'mindmap',
          direction: 'H',
          getHGap: (node) => 60,
          getVGap: (node) => 20,
          getRoot: () => 'node-0',
          getSide: (d) => {
            if (d.id === 'node-1') {
              return 'left';
            }
            return 'right';
          },
          animate: true,
        },
        node: {
          type: 'circle',
          style: {
            labelPlacement: 'center',
            labelText: (d) => d.label,
            labelMaxWidth: '80%',
            labelWordWrap: true,
            labelMaxLines: 2,
          },
        },
        behaviors: ['zoom-canvas', 'drag-canvas'],
        plugins: [
          {
            type: 'tooltip', //提示框
            getContent: (e, items) => {
              let result = `<h4>Custom Content</h4>`;
              items.forEach((item) => {
                result += `<p>Type: ${item.data.description}</p>`;
              });
              return result;
            },
          },
          {
            type: 'contextmenu',
            trigger: 'contextmenu', // 'click' or 'contextmenu'
            onClick: (v) => {
              alert('You have clicked the「' + v + '」item');
            },
            getItems: () => {
              return [
                { name: '展开一度关系', value: 'spread' },
                { name: '查看详情', value: 'detail' },
              ];
            },
            enable: (e) => e.targetType === 'node',
          },
        ],
      });

      graph.render();
      graph.on('node:click', (e) => {
        const id = e.target.id;
        const node = graph.getNodeData(id);
        console.log('打印节点信息node', node);
        window.open(`https://www.baidu.com/?${node.label}`, '_blank');
      });
      graph.on(NodeEvent.POINTER_ENTER, (e) => {
        graph.setElementState({ [e.target.id]: 'active' });
      });

      graph.on(NodeEvent.POINTER_OUT, (e) => {
        graph.setElementState({ [e.target.id]: [] });
      });
    }
  },
};
</script>

<style scoped></style>

数据：

//节点数据
const data: any = {
    nodes: [
      {
        id: 'node-0',
        label: '根root',
        style: {
          size: 100,
          fill: 'lightgreen',
        },
      },
      {
        id: 'node-1',
        label: 'node-左边',
        style: {
          size: 80,
          fill: 'lightblue',
        },
      },
      {
        id: '左1',
        label: '左1',
        parent: 'node-1',
        style: {
          size: 65,
          fill: '#40E0D0',
        
        },
      },
      {
        id: '左2',
        label: '左2',
        parent: 'node-1',
        style: {
          size: 65,
          fill: '#40E0D0',
        },
      },
      {
        id: '左3',
        label: '左3',
        parent: 'node-1',
        style: {
          size: 65,
          fill: '#40E0D0',
        },
      },
      {
        id: '左4',
        label: '左4',
        parent: 'node-1',
        style: {
          size: 65,
          fill: '#40E0D0',
        },
      },
      {
        id: '左5',
        label: '左5',
        parent: 'node-1',
        style: {
          size: 65,
          fill: '#40E0D0',
        },
      },
      {
        id: '左6',
        label: '左6',
        parent: 'node-1',
        style: {
          size: 65,
          fill: '#40E0D0',
        },
      },
      {
        id: 'node-2',
        label: 'note-右边1',
        style: {
          size: 80,
          fill: 'lightblue',
        },
      },
      {
        id: '右1',
        label: '右1',
        parent: 'node-2',
        style: {
          size: 65,
          fill: '#40E0D0',
        },
      },
      {
        id: '右2 长度很长换行',
        label: '右2 长度很长换行',
        parent: 'node-2',
        style: {
          size: 65,
          fill: '#40E0D0',
        },
        labelCfg: {
          autoWrap: true,
          position: 'center',
        },
      },
      {
        id: 'node-3',
        label: 'note-右边2',
        style: {
          size: 80,
          fill: 'lightblue',
        },
      },
    ],
    edges: [
      {
        source: 'node-0',
        target: 'node-1',
        style: { endArrow: true, stroke: '#F6BD16' },
      },
      {
        source: 'node-1',
        target: '左1',
        style: { endArrow: true, stroke: '#F6BD16' },
      },
      {
        source: 'node-1',
        target: '左2',
        style: { endArrow: true, stroke: '#F6BD16' },
      },
      {
        source: 'node-1',
        target: '左3',
        style: { endArrow: true, stroke: '#F6BD16' },
      },
      {
        source: 'node-1',
        target: '左4',
        style: { endArrow: true, stroke: '#F6BD16' },
      },
      {
        source: 'node-1',
        target: '左5',
        style: { endArrow: true, stroke: '#F6BD16' },
      },
      {
        source: 'node-1',
        target: '左6',
        style: { endArrow: true, stroke: '#F6BD16' },
      },
      {
        source: 'node-0',
        target: 'node-2',
        style: { endArrow: true, stroke: '#F6BD16' },
      },
      {
        source: 'node-2',
        target: '右1',
        style: { endArrow: true, stroke: '#F6BD16' },
      },
      {
        source: 'node-2',
        target: '右2 长度很长换行',
        style: { 
            endArrow: true, 
            stroke: '#F6BD16',

         },
      },
      {
        source: 'node-0',
        target: 'node-3',
        style: { endArrow: true, stroke: '#F6BD16' },
      },
    ],
  };
export { data }