如何使用d3-tip或其他库处理旋转矩形的工具提示？

Question

我在SVG上有几个矩形，它们都有旋转。这是代码：

d3.select(#Scene).('svg').selectAll("rect")
.data(rectData)
.attr("x", d => d.x)
.attr("y", d => d.y)
.attr("width", d => d.width)
.attr("height", d => d.height)
.attr("transform", d => 'rotate(' + d.rotation + ' ' + (d.x *2 + d.width)/2 +' ' + (d.y *2 + d.height)/2 +')');

我尝试使用d3-tip.js库来显示提示：

const tip = d3Tip.default()
        .attr('class', 'd3-tip')
        .html(d => {
            return d.name;
        });

svg.call(tip);

svg.selectAll(".tooltip")
   .on('mouseover', tip.show)
   .on('mouseout', tip.hide);

现在看起来像这样：

但我需要看一下中间点。有什么想法吗？