d3/html 简单 div 工具提示位置

Question

这是一个了解使用 div 制作工具提示的方法的简单测试。我正在努力将工具提示 div 定位到圆圈所在的位置。

而不是 "d3.select(this).attr("cx")" 在 div 属性中，我尝试了 "d3.mouse(this)" 和 "event.pageX" 但 div 仍然低于 svg 无论如何。

这是代码快照。

var margin = {top:20, right: 20, bottom: 20, left: 20};

var svg = d3.select("#visualisation")
            .append("svg")
            .attr("width", 960)
            .attr("height", 600);

var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


g.append("circle")
    .attr("class", "circle")
    .attr("cx", 200)
    .attr("cy", 100)
    .attr("r", 50)
    .attr("fill", "red")
    .style("opacity", 0.5);

var tooltip = d3.select("#visualisation")
            .append("div")
            .style("visibility", "hidden");

d3.select(".circle")
    .on("mouseover", mouseover)
    .on("mousemove", mousemove)
    .on("mouseout", mouseout)

function mouseover() {

    d3.select(this)
        .transition()
        .duration(500)
        .style("opacity", "1");

    tooltip
        .style("visibility", "visible")
        // .style("opacity", 1)
} 

function mousemove() { 

    tooltip.html("is it visible?")
        .style("left", (d3.select(this).attr("cx")) + "px")
        .style("top", (d3.select(this).attr("cy")) + "px")

}

function mouseout() {

    d3.select(this)
        .transition()
        .duration(500)  
        .style("opacity", 0.5);

    tooltip
        .style("visibility", "hidden")
        // .style("opacity", 0);
}

任何人都可以让我知道我错过了什么吗？

Answer 1

您缺少必要的 CSS 来定位 <div>。只需添加 position: absolute; (docs) 即可根据需要定位工具提示 div。

我知道这不需要太多解释，但我已经有一段时间没有上过 SO 了，所以只是想回到正轨。 :p

无论如何，如果您将 div 定位为 d3.event.pageX 和 d3.event.pageY，它的外观如下：

var margin = {top:20, right: 20, bottom: 20, left: 20};

var svg = d3.select("#visualisation")
            .append("svg")
            .attr("width", 960)
            .attr("height", 600);

var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


g.append("circle")
    .attr("class", "circle")
    .attr("cx", 200)
    .attr("cy", 100)
    .attr("r", 50)
    .attr("fill", "red")
    .style("opacity", 0.5);

var tooltip = d3.select("#visualisation")
            .append("div").classed('tooltip', true)
            .style("visibility", "hidden");

d3.select(".circle")
    .on("mouseover", mouseover)
    .on("mousemove", mousemove)
    .on("mouseout", mouseout)

function mouseover() {

    d3.select(this)
        .transition()
        .duration(500)
        .style("opacity", "1");

    tooltip
        .style("visibility", "visible")
        // .style("opacity", 1)
} 

function mousemove() { 

    tooltip.html("is it visible?")
        .style("left", d3.event.pageX+'px')//(d3.select(this).attr("cx")) + "px")
        .style("top", d3.event.pageY+'px') //(d3.select(this).attr("cy")) + "px")

}

function mouseout() {

    d3.select(this)
        .transition()
        .duration(500)  
        .style("opacity", 0.5);

    tooltip
        .style("visibility", "hidden")
        // .style("opacity", 0);
}

div#visualisation div.tooltip {
  position: absolute;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="visualisation">

</div>

如果您将它定位在特定的 x,y（如您的代码片段中），它将类似于以下代码片段：

var margin = {top:20, right: 20, bottom: 20, left: 20};

var svg = d3.select("#visualisation")
            .append("svg")
            .attr("width", 960)
            .attr("height", 600);

var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


g.append("circle")
    .attr("class", "circle")
    .attr("cx", 200)
    .attr("cy", 100)
    .attr("r", 50)
    .attr("fill", "red")
    .style("opacity", 0.5);

var tooltip = d3.select("#visualisation")
            .append("div").classed('tooltip', true)
            .style("visibility", "hidden");

d3.select(".circle")
    .on("mouseover", mouseover)
    .on("mousemove", mousemove)
    .on("mouseout", mouseout)

function mouseover() {

    d3.select(this)
        .transition()
        .duration(500)
        .style("opacity", "1");

    tooltip
        .style("visibility", "visible")
        // .style("opacity", 1)
} 

function mousemove() { 

    tooltip.html("is it visible?")
        .style("left", (d3.select(this).attr("cx")) + "px")
        .style("top", (d3.select(this).attr("cy")) + "px")

}

function mouseout() {

    d3.select(this)
        .transition()
        .duration(500)  
        .style("opacity", 0.5);

    tooltip
        .style("visibility", "hidden")
        // .style("opacity", 0);
}

div#visualisation div.tooltip {
  position: absolute;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="visualisation">

</div>

添加:

在此工具提示中添加了 class 'tooltip' div。
添加了pointer-events: none;以避免工具提示闪烁（把它拿出来你会发现区别）

希望这对您有所帮助。

d3/html 简单 div 工具提示位置

d3/html simple div tooltip location

html

tooltip

d3.js