所以我有一个用 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>关于d3.js:样式 <text> 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41475358/