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

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

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

D3v6+

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

D3v5 及之前

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

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

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

因此，为了使用一些逻辑在鼠标悬停时突出显示节点，以便我们可以为不同的节点提供不同的结果，我们可以使用类似的东西:

 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>