如何在动态元素（进入/更新/退出）上添加点击事件或鼠标悬停？

Question

基于此示例： Need another help to show up text on the screen dynamically

可以在 enter/update/exit 规则的帮助下让 D3.js 中的元素（例如文本）出现和消失。

 var texts = svg.selectAll(".texts")
        .data(data);

    textsExit = texts.exit().remove();

    textsEnter = texts.enter()
        .append("text")
        .attr("class", "texts");

    textsUpdate = texts.merge(textsEnter).attr("x", 10)
        .attr("y", (d, i) => 20 + i * 16)
        .text((d,i) => "Node " + (i+1) + ", name: " + d.name);

现在我想在出现的文本元素上添加单击事件或鼠标悬停。所以我尝试先添加鼠标悬停并将textsUpdatepart 更改为：

     textsUpdate = texts.merge(textsEnter).attr("x", 10)
     .attr("y", (d, i) => 20 + i * 16)
      .text((d,i) => "Node " + (i+1) + ", name: " + d.name)
  .on("mouseover", function(d){ this.style.fill == "blue"});

目标是每当我将鼠标移到新出现的元素上时，它们应该变成蓝色。 不幸的是，这并没有奏效。有人可以帮忙并给我一些关于丢失的东西的提示吗？

谢谢

Answer 1

您将在访问 .text(...) 之后和使用 .on(...) 访问之前停止对 textUpdate 的访问。 .on 前多了一个分号。