<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标事件更新标签</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
<script>
  /**
   * 本示例演示以下功能：
   * 鼠标 hover 节点更新节点样式及其标签文本
   * 鼠标 hover 边更新边样式及其标签文本
   * by 十吾
   */

  var data = {
    nodes: [{
      id: 'node1',
      x: 100,
      y: 100,
      label: 'hover 前的\n节点文本 node1'
  }, {
      id: 'node2',
      x: 400,
      y: 100,
      label: 'hover 前的\n节点文本 node2'
  }],
    edges: [{
      source: 'node1',
      target: 'node2',
      label: 'hover 前的边文本',
      labelCfg: {
        refY: 10
      }
  }]
  };

  var graph = new G6.Graph({
    container: 'mountNode',
    width: window.innerWidth,
    height: window.innerHeight,
    defaultEdge: {
      color: '#bae7ff',
      lineAppendWidth: 3
    },
    nodeStateStyles: {
      hover: {
        fill: 'steelblue'
      }
    },
    edgeStateStyles: {
      hover: {
        stroke: '#000',
        lineWidth: 3
      }
    }
  });
  graph.data(data);
  graph.render();

  graph.on('node:mouseenter', function(evt) {
    var target = evt.target;

    var node = evt.item;
    var model = node.getModel();
    model.oriLabel = model.label;
    graph.setItemState(node, 'hover', true);
    graph.updateItem(node, {
      label: 'hover 后 ' + model.id,
      labelCfg: {
        style: {
          fill: '#f00'
        }
      }
    });
  });
  graph.on('node:mouseleave', function(evt) {
    var node = evt.item;
    var model = node.getModel();
    graph.setItemState(node, 'hover', false);
    graph.updateItem(node, {
      label: model.oriLabel,
      labelCfg: {
        style: {
          fill: '#555'
        }
      }
    });
  });
  graph.on('edge:mouseenter', function(evt) {
    var target = evt.target;

    var edge = evt.item;
    var model = edge.getModel();
    model.oriLabel = model.label;
    graph.setItemState(edge, 'hover', true);
    graph.updateItem(edge, {
      label: 'hover 后',
      labelCfg: {
        style: {
          fill: '#f00'
        }
      }
    });
  });
  graph.on('edge:mouseleave', function(evt) {
    var edge = evt.item;
    var model = edge.getModel();
    graph.setItemState(edge, 'hover', false);
    graph.updateItem(edge, {
      label: 'hover 前的边文本',
      labelCfg: {
        style: {
          fill: '#555'
        }
      }
    });
  });
</script></body>
</html>
文档更新时间: 2024-04-05 16:11   作者：admin