Cytoscape.js 节点的标记位置

我正在尝试向cytoscape.js节点添加徽章。徽章是HTML元素。我正在使用

以下是带有徽章的元素。（徽章的颜色无关）

缩小时，徽章的位置设置不正确。它们向下和向右移动了一点。为什么呢

这是我设置位置的代码。我只是在节点的左上角标记。但我删除了HTML元素的宽度，使其看起来像是在节点内部

let z1 = cy.zoom() / 2; // badges look too big with normal size so I downscale them
// e is cytoscape.js element, a node
const p = e.renderedPosition();
const eW = e.renderedWidth() / 2;
const eH = e.renderedHeight() / 2;
// div is an HTML element which is the badge
const w = div.clientWidth;
div.style.transform = `translate(${p.x + eW - w * z1}px, ${p.y - eH}px) scale(${z1})`;

---

我个人更喜欢使用cytoscape.js资源/扩展的解决方案，即popper.js扩展

据我所知，您以某种方式向cytoscape.js添加了引导元素（您没有指定这一点，所以我不得不猜测）

通常，粘性波普尔div可以解决此问题：

var cy=（window.cy=cytoscape({
容器：document.getElementById（“cy”），
风格：[{
选择器：“节点”，
css:{
内容：“数据（id）”，
“文本有效”：“中心”，
“文本halign”：“中心”，
高度：“60px”，
宽度：“160px”，
形状：“圆形矩形”
}
},
{
选择器：“边缘”，
css:{
“目标箭头形状”：“三角形”
}
}
],
要素：{
节点：[{
数据：{
id:“n0”
}
},
{
数据：{
id:“n1”
}
},
{
数据：{
id:“n2”
}
},
{
数据：{
id:“n3”
}
},
{
数据：{
id:“n4”
}
},
{
数据：{
id:“n5”
}
},
{
数据：{
id:“n6”
}
},
{
数据：{
id:“n7”
}
},
{
数据：{
id:“n8”
}
},
{
数据：{
id:“n9”
}
},
{
数据：{
id:“n10”
}
},
{
数据：{
id:“n11”
}
},
{
数据：{
id:“n12”
}
},
{
数据：{
id:“n13”
}
},
{
数据：{
id:“n14”
}
},
{
数据：{
id:“n15”
}
},
{
数据：{
id:“n16”
}
}
],
边缘：[{
数据：{
资料来源：“n0”，
目标：“n1”
}
},
{
数据：{
资料来源：“n1”，
目标：“n2”
}
},
{
数据：{
资料来源：“n1”，
目标：“n3”
}
},
{
数据：{
资料来源：“n4”，
目标：“n5”
}
},
{
数据：{
资料来源：“n4”，
目标：“n6”
}
},
{
数据：{
资料来源：“n6”，
目标：“n7”
}
},
{
数据：{
资料来源：“n6”，
目标：“n8”
}
},
{
数据：{
资料来源：“n8”，
目标：“n9”
}
},
{
数据：{
资料来源：“n8”，
目标：“n10”
}
},
{
数据：{
资料来源：“n11”，
目标：“n12”
}
},
{
数据：{
资料来源：“n12”，
目标：“n13”
}
},
{
数据：{
资料来源：“n13”，
目标：“n14”
}
},
{
数据：{
资料来源：“n13”，
目标：“n15”
}
}
]
},
布局：{
姓名：“dagre”，
填充：5，
等级：100
}
}));
var makeTippy=函数（节点，文本）{
var ref=node.popperRef（）；
var dummyDomEle=document.createElement（“div”）；
var tip=tippy（dummyDomEle{
onCreate:函数（实例）{
instance.popperrinstance.reference=ref；
},
lazy:false，//强制
触发器：“手动”，//强制
//tippy中的dom元素：
内容：函数（）{
var div=document.createElement（“div”）；
div.innerHTML=文本；
返回div；
},
//您自己的喜好：
阿罗：错，
位置：'顶端'，
hideOnClick:false，
多重：对，
斯蒂奇：是的
});
返回端；
};
cy.ready（函数（）{
cy.zoom（0.75）；
cy.center（）；
cy.ready（函数（）{
设nodes=cy.nodes（）；
节点。每个（功能（节点）{
设tippy=makeTippy（node，node.id（））；
tippy.show（）；
});
});
});
正文{
字体：14px helvetica neue，helvetica，arial，无衬线；
}
#赛义德{
身高：100%；
宽度：100%；
位置：绝对位置；
左：0；
排名：0；
}
蒂皮·波普先生{
过渡：无！重要；
}
这个问题源于CSS
规模。缩放元素时，元素的中心点保持不变。下面的示例说明了我的意思


div{
位置：绝对位置；
}
跨度{
字体大小：64px；
}
.s1{
变换：比例（1）；
背景：红色；
}
.s2{
变换：比例（0.5）；
背景：蓝色；
}
00
00
我尝试使用该扩展名。但我发现使用该扩展的定位更具挑战性，因为该扩展使用另一个名为的扩展，并且它没有将标签放在中心的选项。此外，扩展使用了旧版本的popper.js。您可以使用css自定义每个popper元素，因此定位不是问题。