所以我有一个用d3.js创建的图表。当我将点悬停在图表上时，我想显示带有边框和背景色的文本。
现在，只有没有样式的文本才会出现在悬停上，我的代码（工具提示）如下所示：
var g = svg.append("g")
.attr("transform", "translate(" + (cfg.width/2 + cfg.margin.left) + "," + (cfg.height/2 + cfg.margin.top) + ")");
on("mouseover", function(d,i) {
var newX = parseFloat(d3.select(this).attr('cx')) - 10;
var newY = parseFloat(d3.select(this).attr('cy')) - 10;
tooltip
.attr('x', newX)
.attr('y', newY)
.text(Format(d.value))
.transition().duration(200)
.style('opacity', 1)
})
.on("mouseout", function(){
tooltip.transition().duration(200)
.style("opacity", 0);
});
var tooltip = g.append("text")
.attr("class", "tooltip")
.style("opacity", 0);
当我为.tooltip添加样式时，它不会改变任何东西。然后，当我g.append("text")更改为其他任何内容（例如g.append("foreignObject")，g.append("div")等）时，它们甚至不会出现在悬停时（它们显示在控制台元素中）。
我做错了什么？
这里的问题是您尝试将某些 HTML 样式应用于 SVG <text>或<g>元素，但这不起作用。
如果要设置边框、边框半径、背景颜色等样式，则应使用<div>来显示工具提示，以便可以应用所需的任何样式，因为div 是 HTML 元素。但是，有一个问题：您不能将div 或任何其他 HTML 元素附加到 SVG。
因此，解决方案是将工具提示div附加到<body>，并使用d3.event.pageY和d3.event.pageX设置其位置。
使用简化版本的工具提示查看此演示。您可以在 CSS 中设置所有样式，但我在 D3 代码中设置样式只是为了让您了解它是如何工作的。这些样式都不适用于 SVG 文本元素：
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var circle = d3.select("circle")
.on("mousemove", function() {
tooltip.html("Hello")
.style("background-color", "tan")
.style("border", "1px solid black")
.style("padding", "2px")
.style("top", d3.event.pageY + 10 + "px")
.style("left", d3.event.pageX + 10 + "px")
.style("opacity", 1);
}).on("mouseout", function() {
tooltip.style("opacity", 0);
});.tooltip {
position: absolute
}<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
<circle cx="50" cy="50" r="20" fill="teal"></circle>
</svg>