antv g6 darge图的使用

头像
菜鸟前端
     广东
    阅读 7 分钟

    完整示例

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul li {
      list-style: none;
    }

    .g6-component-tooltip {
      border-radius: 6px !important;
      font-size: 12px !important;
      color: #fff !important;
      background-color: #000 !important;
      padding: 20px !important;
      text-align: center !important;
    }
  </style>
</head>

<body>
  <!-- 图的画布容器 -->
  <div id="container"></div>
  <!--  引入 G6  -->
  <script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
</body>

</html>

<script>

  const data = {
    nodes: [
      { id: 'L232', label: 'LCCONCEPTLIST', attr: '1', prop: '1' },
      { id: 'L231', label: 'TRSCSTINFO', attr: '0', prop: '1' },
      { id: 'L183', label: 'NQNQLVLLIST', attr: '1', prop: '1' },
      { id: 'L173', label: 'NQLISTSTATUS', attr: '1', prop: '1' },
      { id: 'L163', label: 'NQIPOISSUE', attr: '1', prop: '1' },
      { id: 'L153', label: 'MFLISTSTATUS', attr: '1', prop: '1' },
      { id: 'L143', label: 'MFCODERELATIONSHIPNEW', attr: '1', prop: '1' },
      { id: 'L133', label: 'LCINSTIARCHIVE', attr: '1', prop: '1' },
      { id: 'L123', label: 'LCINDEXBASICINFO', attr: '1', prop: '1' },
      { id: 'L113', label: 'LCBSHAREIPO', attr: '1', prop: '1' },
      { id: 'L103', label: 'DZSTOCKARCHIVES', attr: '1', prop: '1' },
      { id: 'L93', label: 'DZLISTSTATUS', attr: '1', prop: '1' },
      { id: 'L83', label: 'DZASHAREIPO', attr: '1', prop: '1' },
      { id: 'L73', label: 'COMPINTRODUCTION', attr: '1', prop: '1' },
      { id: 'L63', label: 'CDRDESCRIPTION', attr: '1', prop: '1' },
      { id: 'L153', label: 'BSHAREDESCRIPTION', attr: '1', prop: '1' },
      { id: 'L43', label: 'BASICINFON', attr: '1', prop: '1' },
      { id: 'L32', label: 'BASSECUINFO', attr: '0', prop: '1' },
      { id: 'L22', label: 'TASHAREDESCRIPTION', attr: '1', prop: '1' },
      { id: 'L21', label: 'TRSCOMINFO', attr: '0', prop: '1' },
      { id: 'L11', label: 'SECUMAIN', attr: '1', prop: '1' },
      { id: 'L01', label: 'RESERVEREPORTDATE', attr: '1', prop: '1' },
      { id: '0', label: 'COMCNAPPTDT', attr: '1', prop: '1' },
      { id: 'R01', label: 'BASSPCLNTC', attr: '1', prop: '1' },
    ],
    edges: [
      { source: 'L01', target: '0' },
      { source: 'L11', target: '0' },
      { source: 'L21', target: '0' },
      { source: 'L22', target: 'L21' },
      { source: 'L32', target: 'L21' },
      { source: 'L22', target: 'L32' },
      { source: 'L43', target: 'L32' },
      { source: 'L53', target: 'L32' },
      { source: 'L63', target: 'L32' },
      { source: 'L73', target: 'L32' },
      { source: 'L83', target: 'L32' },
      { source: 'L93', target: 'L32' },
      { source: 'L103', target: 'L32' },
      { source: 'L113', target: 'L32' },
      { source: 'L123', target: 'L32' },
      { source: 'L133', target: 'L32' },
      { source: 'L143', target: 'L32' },
      { source: 'L153', target: 'L32' },
      { source: 'L163', target: 'L32' },
      { source: 'L173', target: 'L32' },
      { source: 'L183', target: 'L32' },
      { source: 'L21', target: 'L32' },
      { source: 'L73', target: 'L21' },
      { source: 'L113', target: 'L21' },
      { source: 'L231', target: '0' },
      { source: 'L232', target: 'L231' },
      { source: '0', target: 'R01' },
    ],
  }

  // 定义提示文本框--结点详细信息描述
  const tooltip = new G6.Tooltip({
    offsetX: 10,
    offsetY: 10,

    // 允许出现 tooltip 的 item 类型
    itemTypes: ['node', 'edge'],
    // custom the tooltip's content
    // 自定义 tooltip 内容
    getContent: (e) => {
      const outDiv = document.createElement('div');
      outDiv.style.width = 'fit-content';
      outDiv.style.height = 'fit-content';
      //outDiv.style.padding = '0px 0px 20px 0px';
      outDiv.innerHTML = `
            <div>Custom Content</div>
            <div>Label: ${e.item.getModel().label}</div>
            <div>Label: ${e.item.getModel().label}</div>
            <div>Label: ${e.item.getModel().label}</div>
            <div>Label: ${e.item.getModel().label}</div>
           `;
      return outDiv;
    },
  });

  const container = document.getElementById('container');
  G6.Util.processParallelEdges(data.edges)
  const graph = new G6.Graph({
    container: 'container', // 指定图画布的容器 id
    // 画布宽高
    width: 1000,
    height: 800,
    layout: {
      type: 'dagre',
      rankdir: 'LR',
      nodesepFunc: () => 10,  // 上下node节点间距
      ranksepFunc: () => 80,  // 左右node节点间距
    },

    plugins: [tooltip],
    fitView: true,  //自适应布局
    modes: {
      default: ['drag-canvas', 'drag-node', 'zoom-canvas'],
    },

    // 节点
    defaultNode: {
      type: 'rect',
      style: {
        stroke: "transparent",  // 设置透明边框，也就是没有颜色
        radius: 10 // 圆角
      },
    },

    // 线条
    defaultEdge: {
      type: 'polyline',
      size: 1,
      color: '#e8e8e8',
      style: {
        endArrow: {
          path: 'M 0,0 L 8,4 L 8,-4 Z',
          fill: '#e8e8e8',
        },
        radius: 20,
      },
    },

    // 鼠标悬浮node节点显示效果
    nodeStateStyles: {
      highlight: {
        stroke: "transparent",  // 无边框
        fill: "#409eff",  // 悬浮时相邻节点背景色
        'text-shape': {
          fill: "#fff"  // 文字颜色
        }
      },
      dark: {
        fill: "#eee",
        'text-shape': {
          fill: "#fff"
        }
      }
    },
    // 鼠标悬浮线条节点显示效果
    edgeStateStyles: {
      highlight: {
        stroke: "#409eff",
        endArrow: {
          path: 'M 0,0 L 8,4 L 8,-4 Z',
          fill: '#409eff',
        },
      },
      dark: {
        opacity: 1,
        color: "#e8e8e8"
      }
    }
  });

  // 自定义node节点
  graph.node(node => {
    const canvas = document.createElement("canvas")
    const context = canvas.getContext("2d")
    const { width } = context.measureText(node.label)  // 获取到文本内容的宽度,让宽度自适应

    const bgColor = node.attr === '1' ? '#ecf5ff' : '#409eff'
    const color = node.attr === '1' ? '#409eff' : ' #fff'

    // 如果是根节点，单独标出
    const fillColor = node.label === 'COMCNAPPTDT' ? '#67c23a' : bgColor
    const textColor = node.label === 'COMCNAPPTDT' ? '#fff' : color

    return {
      id: node.id,
      type: 'rect',
      style: {
        fill: fillColor,
        width: width + 40
      },
      // 配置文本内容
      labelCfg: {
        style: {
          fill: textColor
        }
      }
    }

  })


  // 读取数据
  graph.data(data);
  // 渲染图
  graph.render();

  // 下面的是自定义高亮，官网中复制即可
  function clearAllStats() {
    graph.setAutoPaint(false);
    graph.getNodes().forEach(function (node) {
      graph.clearItemStates(node);
    });
    graph.getEdges().forEach(function (edge) {
      graph.clearItemStates(edge);
    });
    graph.paint();
    graph.setAutoPaint(true);
  }

  graph.on('node:mouseenter', function (e) {
    const item = e.item;
    graph.setAutoPaint(false);
    graph.getNodes().forEach(function (node) {
      graph.clearItemStates(node);
      graph.setItemState(node, 'dark', true);
    });
    graph.setItemState(item, 'dark', false);
    graph.setItemState(item, 'highlight', true);
    graph.getEdges().forEach(function (edge) {
      if (edge.getSource() === item) {
        graph.setItemState(edge.getTarget(), 'dark', false);
        graph.setItemState(edge.getTarget(), 'highlight', true);
        graph.setItemState(edge, 'highlight', true);
        edge.toFront();
      } else if (edge.getTarget() === item) {
        graph.setItemState(edge.getSource(), 'dark', false);
        graph.setItemState(edge.getSource(), 'highlight', true);
        graph.setItemState(edge, 'highlight', true);
        edge.toFront();
      } else {
        graph.setItemState(edge, 'highlight', false);
      }
    });
    graph.paint();
    graph.setAutoPaint(true);
  });
  graph.on('node:mouseleave', clearAllStats);
  graph.on('canvas:click', clearAllStats);
</script>
    前端javascript
    菜鸟前端
    10 声望0 粉丝
    « 上一篇
    Promise

    引用和评论

    推荐阅读
    头像
    浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析

    chokcoco赞 14阅读 4.2k

    头像
    Vue.js-Vue实例

    寒青赞 11阅读 3.9k

    头像
    2025年最新反编译微信小程序的教程及工具

    TANKING赞 7阅读 2k

    头像
    Flex 布局学习总结（对齐方式）

    zZ_jie赞 4阅读 3.1k

    头像
    Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！

    alwaysVe赞 4阅读 9.4k

    头像
    你可能不知道的图片加载相关知识

    夕水赞 4阅读 819

    头像
    巧用 CSS 实现高频出现的复杂怪状按钮 - 镂空的内凹圆角边框

    chokcoco赞 3阅读 1.3k

    0 条评论
    得票最新