d3.js：造型<；文本>；不起作用

我用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

或

元素，但这不起作用

如果要设置边框、边框半径、背景色等的样式，应该使用

显示工具提示，这样就可以应用所需的任何样式，因为div是一个HTML元素。但是，有一个问题：不能将div或任何其他HTML元素附加到SVG

因此，解决方案是将工具提示div附加到

，并使用

d3.event.pageY

和

d3.event.pageX

设置其位置

使用工具提示的简化版本检查此演示。您可以在CSS中设置所有样式，但我在D3代码中设置样式只是为了让您了解它是如何工作的。这些样式都不适用于SVG文本元素：

var tooltip=d3.选择（“主体”）.追加（“div”）
.attr（“类”、“工具提示”）
.样式（“不透明度”，0）；
变量循环=d3。选择（“循环”）
.on（“mousemove”，function（）{
html（“你好”）
.style（“背景色”、“棕褐色”）
.样式（“边框”，“1px纯黑”）
.style（“填充”、“2px”）
.style（“top”，d3.event.pageY+10+“px”）
.style（“左”，d3.event.pageX+10+“px”）
.样式（“不透明”，1）；
}).on（“mouseout”，函数（）{
工具提示。样式（“不透明度”，0）；
});
。工具提示{
位置：绝对位置
}

您将向类
工具提示添加什么样式？你错过了问题中最重要的部分——造型本身@高积云我相信OP正在尝试应用
背景色
和
边框
。“但我同意你的看法，这不是很清楚。”高科穆卢斯很抱歉不清楚，但杰拉尔多·福塔多的回答正是我想要的