CSS类无法在D3.js中文本鼠标悬停的工具提示中工作

Question

我使用CSS在D3.js 中的文本上显示鼠标悬停时的字体大小和背景颜色

d3.select(this).append("text")
.classed("hover", true)
.attr('transform', function(d){ 
  return 'translate(5, 50)';
})
.text(d.name);

"悬停"类不适用，它只显示简单的文本

这是我的CSS类

text.hover {
        position: absolute;
        text-align: left;
        background-color: #FFFFEF;
        width: 400px;
        height: 135px;
        padding: 10px;
        border: 1px solid #D5D5D5;
        font-family: arial,helvetica,sans-serif;
        position: absolute;
        font-size: 1.1em;
        color: #333;
        padding: 10px;
        border-radius: 3px;
        background-color: rgba(255,255,255,0.9);
        color: #000;
        box-shadow: 0 1px 5px rgba(0,0,0,0.4);
        -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
        border:1px solid rgba(200,200,200,0.85);
    }

在文本上应用CSS的最佳方法是什么

Answer 1

处理文本的方式就像你希望它是一个div。你使用了错误的属性，文本怎么能有背景填充？

我已经编辑了提供的小提琴，并表明该课程确实有效：https://jsfiddle.net/u1gpny6o/1/

我在悬停类中只放了一个这样的填充：

.hover {
        fill:red;
    }

你想干什么？它是用文本创建div吗？如果创建一个div，将问题中的类赋予它，并将文本附加到该div，这有意义吗？

编辑：

根据你的评论，我得出了以下结论：https://jsfiddle.net/u1gpny6o/3/

根据这个问题（不是选定的答案，而是第二个答案）：显示圆圈鼠标悬停的数据

我制作了一个工具提示div，如下所示：

var tooltip = d3.select("body")
    .append("div")
    .classed('hover', true)
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");

因此，您可以在css中编辑属性：

.hover {
  background: #FFFFEF;
  width: 400px;
  height: 135px;
  padding: 10px;
  stroke: black;
  stroke-width: 2px;
}

它将出现在mouseover上，在mousemove上移动（到鼠标坐标，这可以编辑），并在mouseout上消失：

.on("mouseover", function(d) {
    tooltip.text(d.name)
       tooltip.style("visibility", "visible");
    })
    .on("mousemove", function() {
      return tooltip.style("top",
        (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
    })
    .on("mouseout", function() {
      return tooltip.style("visibility", "hidden");
    });

你以前做的事毫无意义。你让类悬停，并在CSS中复制属性，例如，设置两次颜色等等。还为元素提供了你不能提供的属性。例如，SVG元素不能有边框，但可以有笔划等等

正如您所提到的，您希望在弹出窗口中加载可视化。我会这样做：

function update(id, data){
var container = d3.select('#'+id) // then use this to append your vis to
. //the rest of the code the create the vis
.
.
.
}

然后，当您将鼠标悬停在节点上时，只需将弹出窗口的id与数据（如果需要）一起传递给更新函数，如下所示：

update(popupid, data);

Answer 2

它不太可能工作，因为你设置悬停类的方式（执行text.horver）以及你附加它的方式。为什么不将mouseover侦听器附加到文本，然后分配类：

定义悬停CSS类：

`.hover { ...styles ...}`

在鼠标悬停时使用：

`select your text
 .on("mouseover", function() { 
   select text
   .classed("hover",true);
 });`

然后可以使用mouseout类似地反转它。