antv/g6 可视化插件 Tooltip_antv g6 tooltip-优快云博客

此博客介绍了如何使用G6库创建图表，点击节点时通过`tooltip`实现内容展示。通过`dice-er-scroll`行为处理节点展开与收缩，配合边缘绘制和文本定位，展示了如何在视觉上实现数据的动态交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 {
itemHeight: 16,
click: “click”,
};
},
click(e) {
const { graph } = this;
const { y } = e;
const item = e.item;
const shape = e.shape;
if (!item) {
return;
}
const model = item.getModel();

if (shape.get("name") === "collapse") {
  graph.updateItem(item, {
    collapsed: true,
    size: [240, 50],
  });
  setTimeout(() => graph.layout(), 100);
} else if (shape.get("name") === "expand") {
  graph.updateItem(item, {
    collapsed: false,
    size: [240, 180],
  });
  setTimeout(() => graph.layout(), 100);
}

},
});

registerEdge(“dice-er-edge”, {
draw(cfg, group) {
const edge = group.cfg.item;
const sourceNode = edge.getSource().getModel();
const targetNode = edge.getTarget().getModel();

const sourceIndex = sourceNode.attrs.findIndex((e) => e.key === cfg.sourceKey);

const sourceStartIndex = sourceNode.startIndex || 0;

let sourceY = 15;

if (!sourceNode.collapsed && sourceIndex > sourceStartIndex - 1) {
  sourceY = topHeight + (sourceIndex - sourceStartIndex + 0.5) * itemHeight;
  // 字段需要滚动条时设置
  // sourceY = Math.min(sourceY, 300);
}

const targetIndex = targetNode.attrs.findIndex((e) => e.key === cfg.targetKey);

const targetStartIndex = targetNode.startIndex || 0;

let targetY = 15;

if (!target