Question

当遇到css溢出时，我在D3中显示工具提示时遇到问题。对此有任何已知的解决方案吗？

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

当页面尚未滚动时，工具提示工作正常。但工具提示的位置则不然。

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

Answer 1

您需要考虑图表的overflow-x。使用chart1元素的scrollLeft属性来定位工具提示：

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

我还建议使用offsetTop和offsetLeft值，而不是硬编码图表div的绝对偏移量。这将允许您更改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");
})

Answer 2

你有没有尝试过使用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'
})

D3.js工具提示位置与css溢出相结合

2 个答案: