节点-卡片

<!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>
  var _this = this;

var COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
    return [["M", x - r, y], ["a", r, r, 0, 1, 0, r * 2, 0], ["a", r, r, 0, 1, 0, -r * 2, 0], ["M", x - r + 4, y], ["L", x - r + 2 * r - 4, y]];
  };
  var EXPAND_ICON = function EXPAND_ICON(x, y, r) {
    return [["M", x - r, y], ["a", r, r, 0, 1, 0, r * 2, 0], ["a", r, r, 0, 1, 0, -r * 2, 0], ["M", x - r + 4, y], ["L", x - r + 2 * r - 4, y], ["M", x - r + r, y - r + 4], ["L", x, y + r - 4]];
  };

/* 左边的粗线 */
      group.addShape("rect", {
        attrs: {
          x: 3,
          y: 0,
          width: 3,
          height: height,
          fill: config.basicColor,
          radius: 1.5
        }
      });
      return container;
    },
    /* 生成树上的 marker */
    createNodeMarker: function createNodeMarker(group, collapsed, x, y) {
      group.addShape("circle", {
        attrs: {
          x: x,
          y: y,
          r: 13,
          fill: "rgba(47, 84, 235, 0.05)",
          opacity: 0,
          zIndex: -2
        },
        className: "collapse-icon-bg"
      });
      group.addShape("marker", {
        attrs: {
          x: x,
          y: y,
          radius: 7,
          symbol: collapsed ? EXPAND_ICON : COLLAPSE_ICON,
          stroke: "rgba(0,0,0,0.25)",
          fill: "rgba(0,0,0,0)",
          lineWidth: 1,
          cursor: "pointer"
        },
        className: "collapse-icon"
      });
    },
    afterDraw: function afterDraw(cfg, group) {
      /* 操作 marker 的背景色显示隐藏 */
      var icon = group.findByClassName("collapse-icon");
      if (icon) {
        var bg = group.findByClassName("collapse-icon-bg");
        icon.on("mouseenter", function() {
          bg.attr("opacity", 1);
          graph.get("canvas").draw();
        });
        icon.on("mouseleave", function() {
          bg.attr("opacity", 0);
          graph.get("canvas").draw();
        });
      }
      /* ip 显示 */
      var ipBox = group.findByClassName("ip-box");
      if (ipBox) {
        /* ip 复制的几个元素 */
        var ipLine = group.findByClassName("ip-cp-line");
        var ipBG = group.findByClassName("ip-cp-bg");
        var ipIcon = group.findByClassName("ip-cp-icon");
        var ipCPBox = group.findByClassName("ip-cp-box");

/**
   * 计算字符串的长度
   * @param {string} str 指定的字符串
   */
  var calcStrLen = function calcStrLen(str) {
    var len = 0;
    for (var i = 0; i < str.length; i++) {
      if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
        len++;
      } else {
        len += 2;
      }
    }
    return len;
  };

G6.registerNode('card-node', {
    drawShape: function drawShape(cfg, group) {
      var config = getNodeConfig(cfg);
      var isRoot = cfg.type === "root";
      var nodeError = cfg.nodeError;
      /* 最外面的大矩形 */
      var container = nodeBasicMethod.createNodeBox(group, config, 243, 64, isRoot);

if (cfg.type !== "root") {
        /* 上边的 type */
        group.addShape("text", {
          attrs: {
            text: cfg.type,
            x: 3,
            y: -10,
            fontSize: 12,
            textAlign: "left",
            textBaseline: "middle",
            fill: "rgba(0,0,0,0.65)"
          }
        });
      }

var ipWidth = 0;
      if (cfg.ip) {
        /* ip start */
        /* ipBox */
        var ipRect = group.addShape("rect", {
          attrs: {
            fill: nodeError ? null : "#FFF",
            stroke: nodeError ? "rgba(255,255,255,0.65)" : null,
            radius: 2,
            cursor: "pointer"
          }
        });

/* ip */
        var ipText = group.addShape("text", {
          attrs: {
            text: cfg.ip,
            x: 0,
            y: 19,
            fontSize: 12,
            textAlign: "left",
            textBaseline: "middle",
            fill: nodeError ? "rgba(255,255,255,0.85)" : "rgba(0,0,0,0.65)",
            cursor: "pointer"
          }
        });

var ipBBox = ipText.getBBox();
        /* ip 的文字总是距离右边 12px */
        ipText.attr({
          x: 224 - 12 - ipBBox.width
        });
        /* ipBox */
        ipRect.attr({
          x: 224 - 12 - ipBBox.width - 4,
          y: ipBBox.minY - 5,
          width: ipBBox.width + 8,
          height: ipBBox.height + 10
        });

/* 在 IP 元素上面覆盖一层透明层，方便监听 hover 事件 */
        group.addShape("rect", {
          attrs: {
            stroke: "",
            cursor: "pointer",
            x: 224 - 12 - ipBBox.width - 4,
            y: ipBBox.minY - 5,
            width: ipBBox.width + 8,
            height: ipBBox.height + 10,
            fill: "#fff",
            opacity: 0
          },
          className: "ip-box"
        });

/* copyIpLine */
        group.addShape("rect", {
          attrs: {
            x: 194,
            y: 7,
            width: 1,
            height: 24,
            fill: "#E3E6E8",
            opacity: 0
          },
          className: "ip-cp-line"
        });
        /* copyIpBG */
        group.addShape("rect", {
          attrs: {
            x: 195,
            y: 8,
            width: 22,
            height: 22,
            fill: "#FFF",
            cursor: "pointer",
            opacity: 0
          },
          className: "ip-cp-bg"
        });
        /* copyIpIcon */
        group.addShape("image", {
          attrs: {
            x: 200,
            y: 13,
            height: 12,
            width: 10,
            img: "https://os.alipayobjects.com/rmsportal/DFhnQEhHyPjSGYW.png",
            cursor: "pointer",
            opacity: 0
          },
          className: "ip-cp-icon"
        });
        /* 放一个透明的矩形在 icon 区域上，方便监听点击 */
        group.addShape("rect", {
          attrs: {
            x: 195,
            y: 8,
            width: 22,
            height: 22,
            fill: "#FFF",
            cursor: "pointer",
            opacity: 0
          },
          className: "ip-cp-box",
          tooltip: "复制IP"
        });

var ipRectBBox = ipRect.getBBox();
        ipWidth = ipRectBBox.width;
        /* ip end */
      }

/* name */
      var nameText = group.addShape("text", {
        attrs: {
          text: cfg.name,
          x: 19,
          y: 19,
          fontSize: 14,
          fontWeight: 700,
          textAlign: "left",
          textBaseline: "middle",
          fill: config.fontColor,
          cursor: "pointer"
          // tooltip: cfg.name,
        }
      });

/* 下面的文字 */
      var remarkText = group.addShape("text", {
        attrs: {
          text: cfg.keyInfo,
          x: 19,
          y: 45,
          fontSize: 14,
          textAlign: "left",
          textBaseline: "middle",
          fill: config.fontColor,
          cursor: "pointer"
        }
      });

if (nodeError) {
        group.addShape("text", {
          attrs: {
            x: 191,
            y: 62,
            text: '⚠️',
            fill: '#000',
            fontSize: 18
          }
        });
      }

var hasChildren = cfg.children && cfg.children.length > 0;
      if (hasChildren) {
        nodeBasicMethod.createNodeMarker(group, cfg.collapsed, 236, 32);
      }
      return container;
    },
    afterDraw: nodeBasicMethod.afterDraw,
    setState: nodeBasicMethod.setState
  }, "single-shape");

var data = {
    nodes: [{
      name: 'cardNodeApp',
      ip: '127.0.0.1',
      nodeError: true,
      type: 'root',
      keyInfo: 'this is a card node info',
      x: 100,
      y: 50
  }, {
      name: 'cardNodeApp',
      ip: '127.0.0.1',
      nodeError: false,
      type: 'subRoot',
      keyInfo: 'this is sub root',
      x: 100,
      y: 150
  }, {
      name: 'cardNodeApp',
      ip: '127.0.0.1',
      nodeError: false,
      type: 'subRoot',
      keyInfo: 'this is sub root',
      x: 100,
      y: 250,
      children: [{
        name: 'sub'
    }]
  }],
    edges: []
  };

var graph = new G6.Graph({
    container: 'mountNode',
    width: 800,
    height: 600,
    defaultNode: {
      shape: 'card-node'
    }
  });

graph.data(data);
  graph.render();
</script>
</body>
</html>

树图

一般图

其他表达形式

元素

交互

动画

辅助工具

复杂案例