【Antv G6】关系图谱鼠标覆盖节点和边 显示tooltip 以及部分节点tooltip不显示问题处理 节点和边常用事件的监听

已于 2022-10-12 17:29:15 修改
阅读量3.5k 收藏 3
点赞数 3
分类专栏： antv 文章标签： javascript 前端 开发语言
于 2022-10-12 17:20:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hzxOnlineOk/article/details/127286673
版权

上示例图

在这里插入图片描述
在这里插入图片描述

一、鼠标覆盖部分节点tooltip不显示问题处理

现象

以下注释掉的这段代码是为节点添加tooltip的方式之一，但会有tooltip隐藏后覆盖节点导致鼠标移动到节点上不出现新的tooltip的现象

modes: {
        default: [
          "drag-node",
          "zoom-canvas",
          "drag-canvas",
          // {
          //   type: 'tooltip',
          //   formatText: function formatText(model) {
          //     // var text = 'description: ' + model.description;
          //     let str = '';
          //     nodeInfo.forEach((it) => {
          //       if (it.id === model.id) {
          //         str = it.description;
          //       }
          //     });
          //     var text = str;
          //     return text;
          //   },

          //   shouldUpdate: function shouldUpdate(e) {
          //     return true;
          //   },
          // },
          {
            type: "edge-tooltip",
            formatText: function formatText(model) {
              let str = "";
              edgesInfo.forEach((it) => {
                let mId = model.start + ":" + model.end;
                if (it.id === mId) {
                  str = it.description;
                }
              });
              var text = str;
              return text;
            },

            shouldUpdate: function shouldUpdate(e) {
              return true;
            },
          },
        ],
      },

解决方式

	const tooltip = new G6.Tooltip({
      // offsetX and offsetY include the padding of the parent container
      offsetX: 20,
      offsetY: 30,
      // the types of items that allow the tooltip show up
      // 允许出现 tooltip 的 item 类型
      itemTypes: ["node"],
      // custom the tooltip's content
      // 自定义 tooltip 内容
      getContent: (e) => {
        const outDiv = document.createElement("div");
        //outDiv.style.padding = '0px 0px 20px 0px';
        const node = e.item.getModel();
        const nodeName = e.item.getModel().tbl_name;
        if (nodeName) {
          let formatedNodeName = `<div>表名：${node.tbl_name}<br/>节点ID：${node.id}<br/>集群ID：${node.clust_name}<br/>表ID：${node.tbl_id}</div>`;
          // console.log('eeeeeeeeeeee', e, nodeName, formatedNodeName);
          outDiv.innerHTML = `${formatedNodeName}`;
          return outDiv;
        }
      },
    });
    const graph = new G6.Graph({
		...
		plugins: [tooltip],
	});

如需要了解如何监听节点以及边的各种鼠标事件例如点击、覆盖、离开等，请查看以下完整代码示例：

二、完整代码

import G6 from "@antv/g6";
import insertCss from "insert-css";
import { useEffect, useState } from "react";
import { connect } from "umi";
// import constants from '../../constants';
// const COLORS = constants.COLORS;

function SwdtShowHidden(props) {
  const { dispatch, relaData = {}, id, nodeInfo = [], edgesInfo = [] } = props;

  const globalFontSize = 12;
  let nodeSize = 80;

  useEffect(() => {
    // const data = {
    //   nodes: [
    //     {
    //       id: '0',
    //       label: '0',
    //     },
    //     {
    //       id: '1',
    //       label: '1',
    //     },
    //     {
    //       id: '2',
    //       label: '2',
    //     },
    //     {
    //       id: '3',
    //       label: '3',
    //     },
    //     {
    //       id: '4',
    //       label: '4',
    //     },
    //     {
    //       id: '5',
    //       label: '5',
    //     },
    //     {
    //       id: '6',
    //       label: '6',
    //     },
    //     {
    //       id: '7',
    //       label: '7',
    //     },
    //     {
    //       id: '8',
    //       label: '8',
    //     },
    //     {
    //       id: '9',
    //       label: '9',
    //     },
    //   ],
    //   edges: [
    //     {
    //       source: '0',
    //       target: '1',
    //     },
    //     {
    //       source: '0',
    //       target: '2',
    //     },
    //     {
    //       source: '0',
    //       target: '3',
    //     },
    //     {
    //       source: '0',
    //       target: '4',
    //     },
    //     {
    //       source: '0',
    //       target: '5',
    //     },
    //     {
    //       source: '0',
    //       target: '7',
    //     },
    //     {
    //       source: '0',
    //       target: '8',
    //     },
    //     {
    //       source: '0',
    //       target: '9',
    //     },
    //     {
    //       source: '2',
    //       target: '3',
    //     },
    //     {
    //       source: '4',
    //       target: '5',
    //     },
    //     {
    //       source: '4',
    //       target: '6',
    //     },
    //     {
    //       source: '5',
    //       target: '6',
    //     },
    //   ],
    // };
    const container = document.getElementById(`container${id}`);
    const width = container.scrollWidth;
    const height = container.scrollHeight || 500;

    insertCss(`
      .g6-component-tooltip {
        background-color: rgba(0,0,0, 0.65);
        padding: 10px;
        box-shadow: rgb(174, 174, 174) 0px 0px 10px;
        width: fit-content;
        color: #fff;

        border-radius = 4px;
      }
      .g6-tooltip {
        border: 1px solid #e2e2e2;

        border-radius: 4px;
        font-size: 12px;
        color: #545454;

        background-color: rgba(255, 255, 255, 0.9);
        padding: 10px 8px;
        box-shadow: rgb(174, 174, 174) 0px 0px 10px;
      }
    `);
    const tooltip = new G6.Tooltip({
      // offsetX and offsetY include the padding of the parent container
      offsetX: 20,
      offsetY: 30,
      // the types of items that allow the tooltip show up
      // 允许出现 tooltip 的 item 类型
      itemTypes: ["node"],
      // custom the tooltip's content
      // 自定义 tooltip 内容
      getContent: (e) => {
        const outDiv = document.createElement("div");
        //outDiv.style.padding = '0px 0px 20px 0px';
        const node = e.item.getModel();
        const nodeName = e.item.getModel().tbl_name;
        if (nodeName) {
          let formatedNodeName = `<div>表名：${node.tbl_name}<br/>节点ID：${node.id}<br/>集群ID：${node.clust_name}<br/>表ID：${node.tbl_id}</div>`;
          // console.log('eeeeeeeeeeee', e, nodeName, formatedNodeName);
          outDiv.innerHTML = `${formatedNodeName}`;
          return outDiv;
        }
      },
    });
    const graph = new G6.Graph({
      container: `container${id}`,
      width,
      height,
      plugins: [tooltip],
      layout: {
        type: "force",
        preventOverlap: true,
        nodeSize: nodeSize + 50,
      },
      fitCenter: true,
      modes: {
        default: [
          "drag-node",
          "zoom-canvas",
          "drag-canvas",
          // {
          //   type: 'tooltip',
          //   formatText: function formatText(model) {
          //     // var text = 'description: ' + model.description;
          //     let str = '';
          //     nodeInfo.forEach((it) => {
          //       if (it.id === model.id) {
          //         str = it.description;
          //       }
          //     });
          //     var text = str;
          //     return text;
          //   },

          //   shouldUpdate: function shouldUpdate(e) {
          //     return true;
          //   },
          // },
          {
            type: "edge-tooltip",
            formatText: function formatText(model) {
              let str = "";
              edgesInfo.forEach((it) => {
                let mId = model.start + ":" + model.end;
                if (it.id === mId) {
                  str = it.description;
                }
              });
              var text = str;
              return text;
            },

            shouldUpdate: function shouldUpdate(e) {
              return true;
            },
          },
        ],
      },
      defaultNode: {
        // type: 'rect',
        size: [nodeSize, 40],
        labelCfg: {
          style: {
            fontSize: globalFontSize,
          },
        },
      },
      defaultEdge: {
        type: "cubic-horizontal",
        style: {
          stroke: "#CED4D9",
          endArrow: true,
          // endArrow: {
          //   path: G6.Arrow.vee(10, 20, 10),
          //   d: 10,
          // },
        },
      },
    });
    /**
     * format the string
     * @param {string} str The origin string
     * @param {number} maxWidth max width
     * @param {number} fontSize font size
     * @return {string} the processed result
     */
    const fittingString = (str, maxWidth, fontSize) => {
      const ellipsis = "...";
      const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
      let currentWidth = 0;
      let res = str;
      const pattern = new RegExp("[\u4E00-\u9FA5]+"); // distinguish the Chinese charactors and letters
      if (str) {
        str.split("").forEach((letter, i) => {
          if (currentWidth > maxWidth - ellipsisLength) return;
          if (pattern.test(letter)) {
            // Chinese charactors
            currentWidth += fontSize;
          } else {
            // get the width of single letter according to the fontSize
            currentWidth += G6.Util.getLetterWidth(letter, fontSize);
          }
          if (currentWidth > maxWidth - ellipsisLength) {
            res = `${str.substr(0, i)}${ellipsis}`;
          }
        });
      }
      return res;
    };
    // Modify the label in the data
    relaData.nodes &&
      relaData.nodes.forEach(function (node) {
        node.label = fittingString(node.label, nodeSize, globalFontSize);
      });
    // relaData.edges.forEach(function (edge) {
    //   console.log('当前边', edge);
    //   edge.label = fittingString(edge.label, 120, globalFontSize);
    // });
    graph.data(relaData);
    graph.render();

    function refreshDragedNodePosition(e) {
      const model = e.item.get("model");
      model.fx = e.x;
      model.fy = e.y;
    }
    graph.on("node:dragstart", (e) => {
      graph.layout();
      refreshDragedNodePosition(e);
    });
    graph.on("node:drag", (e) => {
      refreshDragedNodePosition(e);
    });

    // 清除节点+边高亮
    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('edge:click', (e) => {
    //   console.log('eeeeeeeeee', e);
    // });

    graph.on("node:mouseenter", function (e) {
      var 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("edge:mouseenter", function (e) {
      var item = e.item;
      // console.log('移动到边上了', e, item);
      graph.setAutoPaint(false);
      graph.setItemState(item, "dark", false);
      graph.setItemState(item, "highlight", true);
      graph.paint();
      graph.setAutoPaint(true);
    });

    graph.on("edge:mouseleave", clearAllStats);

    graph.on("canvas:click", clearAllStats);

    if (typeof window !== "undefined")
      window.onresize = () => {
        if (!graph || graph.get("destroyed")) return;
        if (!container || !container.scrollWidth || !container.scrollHeight)
          return;
        graph.changeSize(container.scrollWidth, container.scrollHeight);
      };
  }, [relaData, id, nodeInfo, edgesInfo]);

  return <div id={`container${id}`} style={{ height: "100%" }}></div>;
}

export default connect((store) => {
  return {};
})(SwdtShowHidden);
hzxOnlineOk
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
AntV G6节点的防碰撞设置
笑到世界都狼狈的博客
12-24 6349
在项目的实现过程中，如果在节点和数据量很大的情况下，就会显得节点挤在一起，或者说有节点覆盖的情况出现。 这时就需要对节点设置防碰撞操作。 代码布局如下： 主要代码： layout: { type: 'force', preventOverlap: true, // 防止节点重叠 // 防碰撞必须设置nodeSize或size,否则不生效，由于节点的size设置了40，虽然节点不碰撞了，但是节点之间的距离很近，label几乎都挤在一起，所以又重新设置了大一点的nodeSize,这样效
G6是一个由纯JavaScript编写的关系图基础技术框架
08-10
G6 是一个由纯 JavaScript 编写的关系图基础技术框架，是解决流程图和关系分析的图表库，集成了大量的交互，可以轻松的进行动态流程图和关系网络的开发
antv x6连接桩hover效果（使用element-plus Tooltip组件实现展示连接桩名字）
weixin_67095885的博客
05-21 566
具体实现代码如下,在实例化X6的时候通过onPortRendered这个钩子函数里面使用createVNode去给每一个连接桩节点添加自定义的dom,在结合element UI的组件去使用。2在创建节点的时候，使用 portMarkup: [Markup.getForeignObjectMarkup()]，因为官网的演示案例是react+antd,而我的是vue3+element,实现效果如下图。3在配置连接桩时不要使用circle，要使用fo,具体配置如图。1首先引入需要用到的函数。
antv G6之tooltip
qq_44436257的博客
06-02 6285
文章目录前言一、内置behavior:tooltip1.与使用点击事件的behavior一样，同样是内置behavior，都在创建画布的modes中进行配置二、插件tooltip1.除了内置behavior的tooltip还可以采用插件的方式，自定义tooltip然后在创建画布时进行配置2.配置tooltip插件 前言 项目需求：使用antv G6 treegraph画的一棵树，要求每个节点鼠标hover上去的时候展示节点名称及权重 一、内置behavior:tooltip 1.与使用点击事件的beha
antv/g6 可视化 插件 Tooltip
weixin_48870945的博客
04-15 4103
https://g6.antv.vision/zh/docs/api/Plugins#tooltip 效果：点击蓝色部分，显示蓝色部分内容（内容超出范围） 主要代码： 全部配置代码： const itemHeight = 16; const topHeight = 30; registerBehavior(“dice-er-scroll”, { getDefaultCfg() { return { multiple: true, }; }, getEvents() { return { itemHei
antv/G6图谱（2）自定义Tooltip及报错处理
古之成大事者，不惟有超世之才，亦必有坚韧不拔之志
11-07 750
自定义className，不使用默认的，默认的会有默认样式，然后自己写样式。1、自定义className。
antv G6 5版本tooltip自定义node节点显示
最新发布
qq_43219642的博客
07-16 141
antv G6 5版本tooltip自定义node节点显示。
antv l7 实现自定义地图 以及地图抬高图层 以及散点轮播显示弹窗 鼠标悬浮弹窗
10-31
在本项目中，我们将深入探讨如何使用蚂蚁金服的开源数据可视化库——antv L7，来实现自定义地图、地图抬高图层、散点轮播显示弹窗以及鼠标悬浮时的弹窗功能。antv L7 是一个基于 WebGL 的地图渲染库，特别适合进行大...
Vue3.x+AntV G6+Element Plus
12-04
一个开箱即用的基于Vue3使用AntV G6绘制图谱的项目，项目中包含两个demo，其一：图谱可以实现自适应窗口大小；其二：图谱自适应DOM元素大小。帮助你更好的理解并在Vue3.x中使用AntV G6库，有助于初学者快速上手
antv g2、g6 自定义扩展
04-30
g2自定义 3d柱状图、分割柱状图及g6 自定义卡片
基于vue+g6开发实现的知识图谱编辑器+源代码+文档说明
01-19
添加节点---双击画布空白处添加节点 编辑节点---点击节点后可在右侧配置器进行编辑节点 添加连线---鼠标移入节点后显示锚点，点击锚点后便作为起始节点，点击其它节点实现连线 编辑连线---点击连线后可在右侧...
antv g6 animate
12-18
在数据可视化领域，AntV G6 是一款备受赞誉的图可视化库，它提供了丰富的图形绘制能力，帮助开发者将复杂的数据关系以直观的方式呈现出来。而“AntV G6 Animate”正是这个库的一个重要特性，它为图形元素赋予了生动...
AntV-G6 Tooltip基础配置
天高任鸟飞
04-13 3185
G6 Tooltip基础配置
antv/g6 Tooltip getContent 调接口
weixin_48870945的博客
06-30 760
getContent()，为同步，里面调接口，会报错
tooltip不显示
qq_39389646的博客
04-12 1934
Echarts不显示tooltip 显示Echarts图，但是tooltip不显示 <canvas id="chart-user" style="width:500px; height:500px" ></canvas> 改为div标签，tooltip显示 <div id="chart-user" style="width:500px; height:500px" ...
antv G6 鼠标移入移出的效果 版本3.2.X
qianduan66的博客
09-14 294
第一种：因为是自定义的节点 在draw方法中graph on没有效果 找不到这个class。
AntV G6鼠标移入、单击、双击节点，获取节点信息
笑到世界都狼狈的博客
12-24 1万+
如下图所示，对节点常用的事件如下图所示： 主要代码： // 鼠标进入节点 this.graph.on('node:mouseenter', (e) => { const nodeItem = e.item // 获取鼠标进入的节点元素对象 console.log('鼠标移入', nodeItem._cfg) }) // 单击节点 this.graph.on('node:click', (e) => { const nodeItem = e.item // 获取被
el-tree 实现鼠标移入节点，显示功能按钮
zero_wsh的博客
05-24 2213
2.因为鼠标事件是绑定到span标签（即文本）的，所以要设置高度为100%，不然会出现从一个节点移动到另一个节点时，看到是移上去了但是功能按钮未显示的bug（节点间隔越大，越容易看到）。3.通过@click.stop="()=>{}"禁用掉div部分的el-tree点击事件，实现节点事件和下拉菜单事件区分。1.通过给数据动态加入dropdownShow属性来控制功能按钮的显示和隐藏，不然鼠标移入后，所有节点都会显示功能按钮。
AntV G6流程图节点控制显示和隐藏
热门推荐
qq_26321411的博客
04-03 1万+
1、点击隐藏，控制隐藏节点4以及相关的边 2、点击显示，显示节点4以及相关的边3、点击添加颜色，给指定节点4添加颜色demo如下：&lt;!DOCTYPE html&gt;&lt;html&gt;  &lt;head&gt;    &lt;meta charset="utf-8"&gt;    &lt;title&gt;节点方法&lt;/title&gt;    &lt;script
antv g6在在点击某个节点触发的事件中，隐藏其他的节点与边
05-31
// 监听节点的 click 事件 graph.on('node:click', evt => { const node = evt.item; const edges = graph.getEdges(); const nodes = graph.getNodes(); // 遍历所有的节点和边 edges.forEach(edge => { // ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hzxOnlineOk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值