是否有可能使用d3.js将<text>的<tspan>元素置于最前面

Question

我遇到的问题是描述太长而不是占位符，因此为了适应它，我决定缩短文本以使其恰好适合占位符，并在其末尾添加省略号（...）。

为了实现它，我只是用那个短文本替换了现有标签。但是我也想拥有全名显示工具提示的行为。为了仅将onmouseover事件添加到省略号，我只是将tspan元素添加到具有其自己的类名的现有标签上，依此类推。并将事件添加到此新添加的tspan中。问题是我需要将占位符放在顶部，以便它可以接收鼠标事件（这是树状视图，并且占位符会收到单击事件以使其折叠等）

因此，我选择仅将此tspan放在首位，但显然不起作用。有没有办法将此省略号附加到现有标签旁边作为单独的文本元素？将整个标签连接到顶部可以正常工作，并且我可以看到mouseover事件仅正确地添加到tspan。但是这样，我可以覆盖占位符的大部分区域。 这是一些代码：

 const labelWidth = d3.select(`#label${d.data.id}`).node().textLength.baseVal.value;
                   const overflowValue = containerBBox.width - drawOptions.itemWidth
                   const pixelsPerChar = labelWidth / itemName.length;
                   const maxAllowedCharacters = Math.floor((labelWidth - overflowValue) / pixelsPerChar);
                   label.text(() => {
                            return itemName.substring(0, maxAllowedCharacters - 8)});
                   label.append('tspan')
                   .text('(...)')
                   .attr('id', `ellipsis${d.data.id}`)
                   .attr('class', 'treeItemEllipsis')
                   .attr('z-index', '-1')
                   .attr('position', 'relative')
                   .on('mouseover', () => { tip.show(itemName)})
                   .on('mouseout',() => {tip.hide()})

我可以在此标签上方添加一些组或其他内容，但是在我看来，这似乎是疯狂的骇客。也许有一个简单的方法可以做到这一点。谢谢大家。
下面的图片可能有助于弄清我的问题的模样。