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

已于 2022-10-12 17:29:15 修改
阅读量3.4k 收藏 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
    评论
专栏目录
G6是一个由纯JavaScript编写的关系图基础技术框架
08-10
G6 是一个由纯 JavaScript 编写的关系图基础技术框架，是解决流程图和关系分析的图表库，集成了大量的交互，可以轻松的进行动态流程图和关系网络的开发
Vue3.x+AntV G6+Element Plus
12-04
一个开箱即用的基于Vue3使用AntV G6绘制图谱的项目，项目中包含两个demo，其一：图谱可以实现自适应窗口大小；其二：图谱自适应DOM元素大小。帮助你更好的理解并在Vue3.x中使用AntV G6库，有助于初学者快速上手
AntV G6节点的防碰撞设置
笑到世界都狼狈的博客
12-24 6187
在项目的实现过程中，如果在节点和数据量很大的情况下，就会显得节点挤在一起，或者说有节点覆盖的情况出现。 这时就需要对节点设置防碰撞操作。 代码布局如下： 主要代码： layout: { type: 'force', preventOverlap: true, // 防止节点重叠 // 防碰撞必须设置nodeSize或size,否则不生效，由于节点的size设置了40，虽然节点不碰撞了，但是节点之间的距离很近，label几乎都挤在一起，所以又重新设置了大一点的nodeSize,这样效
antv x6连接桩hover效果（使用element-plus Tooltip组件实现展示连接桩名字）
最新发布
weixin_67095885的博客
05-21 448
具体实现代码如下,在实例化X6的时候通过onPortRendered这个钩子函数里面使用createVNode去给每一个连接桩节点添加自定义的dom,在结合element UI的组件去使用。2在创建节点的时候，使用 portMarkup: [Markup.getForeignObjectMarkup()]，因为官网的演示案例是react+antd,而我的是vue3+element,实现效果如下图。3在配置连接桩时不要使用circle，要使用fo,具体配置如图。1首先引入需要用到的函数。
使用antv的G6展示折叠节点树的效果
rock_23的博客
11-28 6876
安装： npm install --save @antv/g6; 效果图展示： 这些代码可以直接拿过去用，这是封装的一个公共组件。 import React, { useEffect, useState } from 'react'; // 引入G6 import G6 from '@antv/g6'; // 引入antv的样式 import insertCss from 'insert-css'; const GsixManage = (props) => { const listObj
antv G6之tooltip
qq_44436257的博客
06-02 6145
文章目录前言一、内置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 4016
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 692
自定义className，不使用默认的，默认的会有默认样式，然后自己写样式。1、自定义className。
AntV-G6 Tooltip基础配置
天高任鸟飞
04-13 3123
G6 Tooltip基础配置
antv/g6 Tooltip getContent 调接口
weixin_48870945的博客
06-30 739
getContent()，为同步，里面调接口，会报错
antv l7 实现自定义地图 以及地图抬高图层 以及散点轮播显示弹窗 鼠标悬浮弹窗
10-31
antv l7 实现自定义地图 以及地图抬高图层 以及散点轮播显示弹窗 鼠标悬浮弹窗
antv g2、g6 自定义扩展
04-30
g2自定义 3d柱状图、分割柱状图及g6 自定义卡片
基于vue+g6开发实现的知识图谱编辑器+源代码+文档说明
01-19
添加节点---双击画布空白处添加节点 编辑节点---点击节点后可在右侧配置器进行编辑节点 添加连线---鼠标移入节点后显示锚点，点击锚点后便作为起始节点，点击其它节点实现连线 编辑连线---点击连线后可在右侧...
Vuex和antv/g6实现在线绘制分析流程图功能演示Demo
09-07
但是因为有很多算法都是和项目中业务相关不一定符合其他小伙伴的实际应用情况并且项目存在保密机制不方便全部分享出来，所以本Demo中仅抽取最基础的部分简单演示流程图创建、节点链接、节点删除、菜单操作、重新渲染...
tooltip不显示
qq_39389646的博客
04-12 1928
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 X6基于vue3+Ts实现线和节点的tooltip
furfur-jiang的博客
07-19 4411
antv X6基于vue3+Ts实现线和节点的tooltip
ToolTip 显示不出来的一个原因
热门推荐
u013506600的专栏
04-29 1万+
现在一说到ToolT
文本内容过多，显示省略号...，鼠标悬浮显示全部
qq_48964916的博客
06-28 487
设置对应的css样式 max-width: 300px !important;//设置最大宽度 overflow: hidden; white-space: nowrap;//设置不能换行 text-overflow: ellipsis;//显示省略号且悬浮显示全部
antv/x6 拖动连接线
12-21
在antv/x6中，可以通过拖动来连接两个节点。下面是一个示例代码： ```javascript import { Graph, Node, Edge } from '@antv/x6'; // 创建画布 const graph = new Graph({ container: document.getElementById('container'), width: 800, height: 600, }); // 创建节点 const node1 = graph.addNode({ x: 100, y: 100, width: 80, height: 40, shape: 'rect', attrs: { body: { fill: '#ffffff', stroke: '#000000', }, label: { text: 'Node 1', }, }, }); const node2 = graph.addNode({ x: 300, y: 200, width: 80, height: 40, shape: 'rect', attrs: { body: { fill: '#ffffff', stroke: '#000000', }, label: { text: 'Node 2', }, }, }); // 创建连接线 const edge = graph.addEdge({ source: node1, target: node2, attrs: { line: { stroke: '#000000', }, }, }); // 开启连接线的拖动交互 graph.addEdgeTools(edge, [ { name: 'source-arrowhead', }, { name: 'target-arrowhead', }, { name: 'vertices', }, ]); // 开启节点的拖动交互 graph.addNodeTools(node1, [ { name: 'boundary', }, ]); graph.addNodeTools(node2, [ { name: 'boundary', }, ]); ``` 这段代码创建了一个画布，并在画布上添加了两个节点和一个连接线。通过开启连接线和节点的拖动交互，可以实现拖动连接线的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

hzxOnlineOk

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

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

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

打赏作者

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

抵扣说明：

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

余额充值