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/

从这个问题（不是选定的答案，而是第二个答案）：Show data on mouseover of circle

我已经制作了一个工具提示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;
}

它将出现在鼠标悬停时，移动鼠标移动（移动到鼠标坐标，这可以编辑）并在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.hover）以及如何附加它，因此它不起作用。为什么不将mouseover侦听器附加到文本然后分配类：

定义你的悬停CSS类：

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

在鼠标悬停时使用它：

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

然后您可以使用mouseout类似地撤消它。

在D3.js中的鼠标悬停时，CSS类不在工具提示中工作

2 个答案: