鼠标悬停在节点文本下划线

Question

我有一个用 d3.js 制作的图表，我有以下节点的属性：

 // Enter any new nodes at the parent's previous position
  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
      .on("click", click)
      .on("dblclick", dblclick)

我想添加将鼠标悬停在节点标题上时为其添加下划线的功能。不幸的是，这样的东西不起作用：

  var nodeEnter = node.enter().append("g")
      .on("mouseover").style("text-decoration","underline")
      .on("mouseout").style("text-decoration","none")

编辑：我更愿意提出一个条件，使这种情况只发生在图表的某些节点上。

Answer 1

您可以使用 CSS

在鼠标悬停时添加下划线

.node:hover{
    text-decoration: underline;
}

Answer 2

您没有正确使用 selection.on() 方法。为了对事件执行某些操作，您需要为该方法提供第二个参数：描述对事件采取的操作的函数：

D3v6+

.on("mouseover", function(event, datum) { ... })

D3v5 及之前

.on("mouseover", function(datum, index, nodes) { ... })

在 D3 的所有版本中，this 将是目标元素（除非使用 arrow notation）。数据是绑定到目标元素的数据，数组中的一项传递给 selection.data().

如果您只提供一个参数，它 return 就是分配给该事件的当前事件处理函数。在你的情况下，你可能还没有这样做（因为你正在尝试这样做），所以 .on("mouseover").style(...) 会 return 一个错误，例如“找不到属性 null 样式”，因为.on("mouseover") 将 return null: 没有事件处理函数分配给此事件 return.

因此，要使用某种逻辑在鼠标悬停时突出显示节点，以便我们可以针对不同的节点获得不同的结果，我们可以使用类似的东西：

 selection.on("mouseover", function(event, datum) {
   if(datum.property == "someValue") {
      d3.select(this).style("text-decoration","underline");
   }
 })
 .on("mouseout", function(event,datum) {
    d3.select(this).style("text-decoration","none");
 })

可以将 if 语句替换为您喜欢的任何逻辑。

我看你是可能使用分层布局生成器，D3的分层布局生成器将原始数据的属性嵌套到数据属性中，这样布局属性和非布局属性不会冲突，因此 datum.property 可能位于 datum.data.property（如果遇到问题，请记录数据）。

var svg = d3.select("body")
  .append("svg");
  
var data = [
"Underline on mouse",
"Never underline"
];

svg.selectAll("text")
  .data(data)
  .enter()
  .append("text")
  .attr("x", 20)
  .attr("y", (d,i)=>i*50+40)
  .text(d=>d)
  .on("mouseover", function(event, datum) {
    if(datum == "Underline on mouse") {
      d3.select(this).style("text-decoration","underline");
   }
  })
  .on("mouseout", function(event,datum) {
    d3.select(this).style("text-decoration","none");
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>

鼠标悬停在节点文本下划线

Underline node text on mouse over

html

javascript

css

d3.js