Позиция подсказки D3.js в сочетании с переполнением css

Question

У меня возникла проблема с отображением всплывающих подсказок в D3 в сочетании с переполнением css. Существуют ли для этого известные решения?

код CSS:

#chart1 { 
    overflow-x: auto; 
    overflow-y: hidden; 
    max-width: 800px; 
    max-height: 225px; 
    position: absolute; 
    left: 140px; 
    top: 10px; 
} 

D3 Код:

.on("mouseover", function(d) { 
        tooltip.transition() 
         .duration(400) 
         .style("opacity", 0); 
        tooltip.transition() 
         .duration(100) 
         .style("visibility", "visible") 
         .style("opacity", .8); 
        tooltip.html(d.visitCountry + "<br/> " + tooltipDate(d.startDate) + " - " + tooltipDate(d.endDate) + "<br/> " + d.visitPurpose) 
         .style("left", (d3.event.pageX - 15) + 'px') // problem here? 
         .style("top", (d3.event.pageY - 10) + 'px'); // problem here? 
       }) 
       .on("mousemove", function(d) { 
        return tooltip.style("top", (d3.event.pageY - 10)+"px").style("left",(d3.event.pageX - 110)+"px"); 
       }) 
       .on("mouseout", function(d) { 
        tooltip.transition() 
        .duration(0) 
        .style("visibility", "hidden"); 
       }); 

Когда страница не прокручивается, подсказка работает отлично. Но позиции всплывающей подсказки становятся иначе.

Fiddle: http://jsfiddle.net/00fhtuyg/1/

Answer 1

Вы когда-нибудь пробовали использовать d3.tip.js? Я думаю, что это легко делать подсказки:

fiddle

API: https://github.com/Caged/d3-tip/blob/master/docs/positioning-tooltips.md#tipdirection

Изменение направления

программно

tip.direction(function(d) { 
    if(d == 'california') return 'w' 
    if(d == 'new york') return 'e' 
}) 

Answer 2

Вы должны принять во внимание перелива-х диаграммы. Используйте свойство scrollLeft элемента Chart1 позиционировать подсказку:

d3.event.pageX + document.getElementById("chart1").scrollLeft 

Я также предлагаю использовать значение offsetTop и offsetLeft вместо жесткого кодирования абсолютного смещения графика дел. Это позволит вам изменить положение div без необходимости изменения соответствующего js-кода.

d3.event.pageX + document.getElementById("chart1").scrollLeft - document.getElementById("chart1").offsetLeft 

Таким образом, вы будете иметь:

.on("mousemove", function(d) { 
    return tooltip.style("top", (d3.event.pageY - document.getElementById("chart1").offsetTop + 15)+"px").style("left",(d3.event.pageX-document.getElementById("chart1").offsetLeft + document.getElementById("chart1").scrollLeft + 10)+"px"); 
})