Question

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

            .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);
            })

Answer 1

如果你想使用偏移量，你可以在tip.show（d）之后得到工具提示的初始位置：

tip.style('top');
tip.style('left');

同样，要设置绝对位置：

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

        tip.show(d);

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

Answer 2

前面提到的答案对我不起作用（并且不能修改为“建议的编辑队列已满..”），但经过一些细微的调整，它工作正常：

.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
  })

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

2 个答案: