工具提示在 d3 图表中开箱即用

Question

我的工具提示在 d3 图表中开箱即用。

有人可以指导我做错了什么吗？

css -

div.tooltip {
        position: absolute;
        width: 240px;
        height: 140px;
        font: 14px sans-serif;
        background: white;
        border: 0px;
        box-shadow: 0 0 5px #999999;
        border-radius: 2px;
        pointer-events: none;
        text-align: left;
        padding: 5px 0 5px 15px;
        opacity: 100;
    }

工具提示的 div -

// Define the div for the tooltip
var div = d3
    .select("body")
    .append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

我觉得mousemove 有问题，mouseover 请指导我。

代码沙箱在这里 - https://codesandbox.io/s/wizardly-butterfly-2nnbw

Answer 1

在 TimelineChart.js 行号 513 上。 https://codesandbox.io/s/amazing-waterfall-gz4o8

div
.html(
`<span>The following changes are made to running configuration :</span><br/><br/>`
 <span>Lines Added : ${d.magnitude} % </span><br/>
<span>Lines Removed : ${d.magnitude} % </span><br/><br/>
<span>${parseDate(d.startTime)}</span>`
.style("left", d3.event.pageX + "px")
.style("top", d3.event.pageY - 28 + "px");

用这个替换

div
.html(
`<span>The following changes are made to running configuration :</span><br/><br/>
<span>Lines Added : ${d.magnitude} % </span><br/>
<span>Lines Removed : ${d.magnitude} % </span><br/><br/>
<span>${parseDate(d.startTime)}</span>`
).style("top", d3.event.pageY - 28 + "px");
var out_width = this.getBoundingClientRect().width - 130;
if(d3.event.pageX > out_width){
div.style("left", d3.event.pageX + "px")
div.style("transform", "translateX(-100%)");
}
else{
div.style("left", d3.event.pageX + "px");
div.style("transform", "translateX(0)");
}