D3.js工具提示位置结合CSS溢出 [英] D3.js tooltip position combined with css overflow

问题描述

与CSS溢出结合使用时，我在D3中显示工具提示时遇到问题.有任何已知的解决方案吗?

I'm experiencing problem with displaying tooltips in D3 when combined with the css overflow. Are there any known solutions for this?

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

未滚动页面时，工具提示可以正常工作.但是工具提示的位置会变为其他状态.

When the page hasn't been scrolled, the tooltip works fine. But the tooltip positions become off otherwise.

提琴: http://jsfiddle.net/00fhtuyg/1/

推荐答案

您是否曾经尝试使用d3.tip.js? 我认为执行工具提示很容易:

Have you ever tried using d3.tip.js? I think it is easy for doing the tooltip:

小提琴

API: https://github.com. 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'
})

这篇关于D3.js工具提示位置结合CSS溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！