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);
        });

g.selectAll（“点”）
.数据（数据集）
.enter（）.append（“圆”）
.attr（“r”，3）
.attr（“cx”，函数（d）{return xScale（d.date）；}）
.attr（“cy”，函数（d）{返回yS（d.value[a]）；}）
.on（“鼠标悬停”，功能（d）{
tooltip.transition（）
.持续时间（200）
.样式（“不透明度”，.9）；
html（d[“date”]+“
（“+”TEST“+”））
.style（“左”（d3.event.pageX+5）+“px”）
.style（“top”，（d3.event.pageY-28）+“px”）；
})
.开启（“鼠标出”，功能（d）{
tooltip.transition（）
.持续时间（500）
.样式（“不透明度”，0）；
});

---

然而，什么也没有出现。控制台中没有错误。我验证了“mouseover”被正确调用，但仅此而已。这段代码有什么问题？

我假设您使用的是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通用更新模式

---

我还为此创建了一个简单的应用程序。

是否有任何html需要复制？