时间戳

首页 > 解决方案 > 工具提示未显示在图表中

javascript - 工具提示未显示在图表中

问题描述

我定义了工具提示：

var tooltip = d3.select(TARGET_ELEMENT).append("div")
.attr("class", "tooltip")
.style("opacity", 50)
.attr("style", "position: absolute; pointer-events: none; background: lightsteelblue; width:200px; height:28px;");

然后像我在各种示例中看到的那样使用它：

 g.selectAll("dot")
        .data(Dataset)
        .enter().append("circle")
        .attr("r", 3)
        .attr("cx", function(d) { return xScale(d.date); })
        .attr("cy", function(d) { return yS(d.value[a]); })
        .on("mouseover", function(d) {
            tooltip.transition()
                 .duration(200)
                 .style("opacity", .9);
            tooltip.html(d["date"] + "<br/> (" +"TEST"+ ")")
                 .style("left", (d3.event.pageX + 5) + "px")
                 .style("top", (d3.event.pageY - 28) + "px");
        })
        .on("mouseout", function(d) {
            tooltip.transition()
                 .duration(500)
                 .style("opacity", 0);
        });

然而，什么都没有出现。控制台中没有错误。我验证了“鼠标悬停”被正确调用但就是这样。这段代码有什么问题？

标签： javascriptd3.js

解决方案

我假设您使用的是 d3 v4/v5。只需将工具提示更改为：

var tooltip = d3.select("#target").select(".tooltip").data([0]);
tooltip = tooltip.enter().append("div")
    .attr("class", "tooltip")
    .merge(tooltip)
    .style("opacity", 50)
    .attr("style", "position: absolute; pointer-events: none; background:lightsteelblue; width:200px;height:28px;")

您可以在此处了解 d3 一般更新模式。

我还为此创建了一个简单的小提琴。

推荐阅读