D3Tip不一致

Question

我一直與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的測試，並且該錯誤不會發生在那裏。

Answer 1

事實證明，這是解決一個麻煩的事情。我現在使用的解決方法是刪除CSS後的d3tip：after部分。現在，這個提示不再「指向」正在懸停的欄，使得這個bug無關緊要。我意識到這不是最好的選擇，但不值得花時間投資爲什麼會發生這種情況。

Answer 2

嘗試添加以下代碼以將鼠標指針放置在工具提示處。

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

Below is the proper code:

定義div與idtooltip：

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