Question

我刚刚为我的页面实现了一个twitter bootstrap网格布局，效果很好。问题是我的工具提示方案已经过时了。我通过对一些减法进行硬编码来实现它，但感觉不对。

这question and answer处理它，这就是我认为它应该如何。但是使用它会让我的工具提示离开我的图表区域。代码（带有我的硬编码值，因此可行）在

之下

        divVar .html(formatTime(d.datum) + "<br/>" +"Persons: " + Math.round(d.Prs))  
            .style("left", (d3.event.pageX-550) + "px")     
            .style("top", (d3.event.pageY - 358) + "px");

为什么没有减法就行不通？这里是简化引导程序布局的小提琴： link

更新：元素代码

var margin = {top: 40, right: 185, bottom: 100, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
var margin2 = {top: 440, right: 185, bottom: 20, left: 40},
    height2 = 500 - margin2.top - margin2.bottom;


var divVar =  d3.select("#chart1")
                    .append("div")
                    .attr("id", "MainTool")
                    .attr("class", "tooltip")
                    .style("opacity", 0);

var divVar2 =  d3.select("#chart1")
                .append("div")
                .attr("id", "AHSTool")
                .attr("class", "tooltip")
                .style("opacity", 0);

还有一些css：

#MainTool {   
    position: absolute;           
    text-align: center;           
    width: 80px;                  
    height: 28px;                 
    padding: 2px;             
    font: 12px sans-serif;        
    background: lightsteelblue;   
    border: 0px;      
    border-radius: 8px;           
    pointer-events: none;         
}

#AHSTool {   
    position: absolute;           
    text-align: center;           
    width: 80px;                  
    height: 35px;                 
    padding: 2px;             
    font: 12px sans-serif;        
    background: orange;   
    border: 0px;      
    border-radius: 8px;           
    pointer-events: none;         
}

Answer 1

使用比我第一个更好的解决方案更新了答案。

我自己的解决方案：

d3.mouse(d3.event.target)[0] and d3.mouse(d3.event.target)[1]

评论：不是最好的方式，请参阅@AmeliaBR：s答案为何。

Updated fiddle - 19/9

使用AmeliaBr的建议这就是我所做的（以及更新的网格结构）：

.style("left", (d3.event.pageX-document.getElementById('navTopVr1').offsetLeft+2) + "px")         
.style("top", (d3.event.pageY-document.getElementById('navTopVr1').offsetTop-document.getElementById('chartdiv1').offsetTop-28) + "px");

parent-div是chartdiv1（参见哪一个小提琴）。这比我自己的尝试更好。 -28是因为美学。

D3（使用Bootstrap网格布局） - 工具提示放置关闭

1 个答案: