Question

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

我尝试了div属性中的“ d3.select（this）.attr（“ cx”）“ “ d3.mouse（this）”和“ event.pageX”，但div始终保持在svg以下。

这是代码快照。

Fil0.fk
Fil1.fk
Fil2.fk
Fil3.fk
Fil4.fk

任何人都可以让我知道我在想什么吗？

Answer 1

您缺少放置<div>所需的CSS。只需添加position: absolute;（docs）即可根据需要放置工具提示div。

我知道这不需要太多的解释，但是我已经有一段时间没有去研究过了，所以我只是想回到原来的位置。：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>

添加：

为此工具提示div添加了“工具提示”类。
添加了pointer-events: none;，以避免工具提示闪烁（取出提示，您会注意到其中的区别）

希望这会有所帮助。

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

1 个答案: