Javascript 将D3工具提示放置在光标位置

我在我的想象中使用。现在我想为非常宽的元素添加工具提示，这些元素可能会扩展到可见画布之外。默认情况下，工具提示显示在对象的水平中心，这意味着在我的情况下，工具提示可能不在可见区域。我需要的是显示在光标水平位置的工具提示，但我不知道如何正确更改工具提示位置。我可以设置一个偏移量，我可以得到光标的坐标，但我不能得到的是工具提示的初始位置，这样我就可以计算出正确的偏移量。我也不能设置绝对位置：

            .on("mouseover",function(d){
                var coordinates = [0, 0];
                coordinates = d3.mouse(this);
                var x = coordinates[0];
                var y = coordinates[1];
                tip.offset([-20,20]); // this works
                tip.attr("x",40); // this doesn't
                tip.show(d);
            })

.on('mouseover', function(d){
        var x = d3.event.x,
            y = d3.event.y;

        tip.show(d);

        tip.style('top', y);
        tip.style('left', x);
      })

---

如果要使用偏移，可以在tip.show（d）之后获取工具提示的初始位置：

同样，要设置绝对位置，请执行以下操作：

            .on("mouseover",function(d){
                var coordinates = [0, 0];
                coordinates = d3.mouse(this);
                var x = coordinates[0];
                var y = coordinates[1];
                tip.offset([-20,20]); // this works
                tip.attr("x",40); // this doesn't
                tip.show(d);
            })

.on('mouseover', function(d){
        var x = d3.event.x,
            y = d3.event.y;

        tip.show(d);

        tip.style('top', y);
        tip.style('left', x);
      })

---

前面提到的答案不适用于我（并且不能修改为“建议的编辑队列已满…”），但经过一些小的调整，它可以正常工作：

.on('mouseover', function(d){
    var x = d3.event.x,
        y = d3.event.y;

    tip.show(d);

    tip.style('top', y-10 + 'px'); // edited
    tip.style('left', x+'px'); // edited
  })

---

你是对的，我不知道我的心在哪里。。。刚刚删除了注释。我可以获得坐标，但我无法设置它们，例如

tip。样式（“top”，20）

无效，我将其放置在

tip.show（d）

…坐标与“px”一起使用时确实有效-见下文。我不再使用D3，但我会相信你的话并接受这个答案。您是否在使用Edge或Firefox进行任何更改？问题似乎是，如果没有px，一些浏览器不接受坐标作为有效的CSS。（具有讽刺意味的是，我自己也发现了这一点）这是一个好消息——我当时正在使用Firefox。我刚刚在Firefox和Chrome&Edge（基于Chrome）中测试了这两个代码片段。使用建议的

+'px'

使工具提示在所有三种情况下都兼容，否则只有基于chromium的浏览器才能处理坐标。