javascript - D3Tip Nib 放置不一致

我已经与D3和D3tip一起工作了几周，最近我发现提示的显示不一致（关于同一主题的问题已经发布，并且在link之前没有得到回答）。

我的例子：
我已经使用D3Tip构建了一个响应式堆叠条形图，提示显示得很好：


但是，如果我向右移动，一些提示就会开始奇怪地显示。它们突然比我声明的偏移量([-height/35, 0])更向左移动：


我无法始终如一地重现这一点，我发现的唯一相似之处是它仅发生在图表的右侧（类似于上面链接的先前询问的问题）。

我检查了CSS，发现找不到任何限制提示的内容（我尝试更改过流属性，位置和页边距，但正确的页边距似乎是我第一次解决了此问题将鼠标悬停在最右边的小节上，然后从右边输入。我很难理解这个结果）。可能是库中的某些东西导致这种情况发生了吗？我太缺乏经验了，无法开始在那里进行更改，但是我很好奇，看看是否有人知道一种可以使我保持当前设计的解决方法。

谢谢参观！

以供参考：
我的JS中D3tip的代码如下：

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-height/35, 0])
  .html(function(d) {
    return /*TEXT*/;
  });

事件称为：

.style("opacity", 1)
.on('mouseover', function(d){
            d.color = color(d.name);
            d3.select(this).style("opacity", 1);
            tip.show(d);
          } )
          .on('mouseout', function(d) {
            d3.select(this).style("opacity", 0.6)
            tip.hide(d);
          } );

以及提示和“指针”的CSS：

.d3-tip {
  line-height: 1;
  font-weight: normal;
  font-size: .8em;
  padding: 12px;
  background: #FFFFFF;
  color: #000000;
  border-radius: 2px;
  border-style: solid;
  border-width: 1px;
  overflow: visible;
  position: relative;
}

.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

包含我的图表的div的CSS：

#chart {
  display: inline-block;
  border: 1px solid #DDD;
  font-size: .8em;
  font-weight: lighter;
  float: left;
  position: relative;
  width: 98%;
  height: 50%;
  margin-top: 1%;
  margin-left: 1%;
  margin-right: 15%;
  overflow-y: visible;
}

更新：已在Safari上进行了测试，并且该错误未在其中发生。

最佳答案

尝试添加以下代码以将工具提示放置在鼠标指针上。

.style("left",  (d3.event.pageX) + "px")
.style("top",  (d3.event.pageY) + "px");

Below is the proper code:

用div id定义tooltip：

    var div = d3.select("#toolTip");
    // if there is a div id="toolTip" already in body.Else append div as stated below.


    var div = d3.select("body").append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);

将以下代码添加到您的svg中：

svg.on("mouseover", function(d) {
  div.transition()
  .style("opacity", .9);
  div.html("Some Key: " +  d.value+"<br/>")
  .style("left",  (d3.event.pageX) + "px")
  .style("top",  (d3.event.pageY) + "px");
  }).on("mouseout", function() {
    div.transition()
    .duration(500)
    .style("opacity", 0);
    });

CSS:

div.tooltip {
    position: absolute;
    padding: 10px;
    background: #f4f4f4;
    border: 0px;
    border-radius: 3px;
    pointer-events: none;
    font-size: 11px;
    color: #000;
    line-height: 16px;
    border: 1px solid #d4d4d4;
}