切换节点图片

<!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>
  /**
   * 本示例演示以下功能：
   * 1、如何使用图片作为节点背景；
   * 2、点击切换节点背景图片。
   * 
   */
  G6.registerNode('circleNode', {
    drawShape: function drawShape(cfg, group) {
      var keyShape = group.addShape('circle', {
        attrs: {
          x: 0,
          y: 0,
          r: 30,
          fill: '#87e8de'
        }
      });

return keyShape;
    }
  }, 'circle');

var img = new Image();
  img.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566553535233&di=b0b17eeea7bd7356a6f42ebfd48e9441&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F64%2F29%2F01300543361379145388299988437_s.jpg';

// 点击图片节点，切换背景图片
  var img2 = new Image();
  img2.src = 'http://seopic.699pic.com/photo/50055/5642.jpg_wh1200.jpg';
  var data = {
    nodes: [{
      x: 100,
      y: 100,
      shape: 'circleNode',
      label: 'circle',
      id: 'node1',
      labelCfg: {
        position: 'center'
      }
  }, {
      x: 400,
      y: 100,
      shape: 'image',
      id: 'node2',
      img: img.src,
      label: '头像',
      style: {
        cursor: 'pointer'
      },
      labelCfg: {
        position: 'bottom'
      }
  }],
    edges: [{
      source: 'node1',
      target: 'node2',
      label: 'line',
      labelCfg: {
        refY: 10
      }
  }]
  };
  // 避免拖动过程中闪烁：使用加载已经LOAD好的图片
  img.onload = function() {
    var graph = new G6.Graph({
      container: 'mountNode',
      width: 1000,
      height: 600,
      defaultEdge: {
        color: '#bae7ff'
      },
      modes: {
        default: ['drag-node', {
          type: 'drag-node'
      }]
      }
    });
    graph.data(data);
    graph.render();

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

树图

一般图

其他表达形式

元素

交互

动画

辅助工具

复杂案例

切换节点图片