D3.js鼠标事件不起作用

我有以下问题：我制作了一个力图，只包含渲染为圆的节点。一切正常，我可以在悬停时更改颜色，单击它们并删除一些。

我编写此函数是为了根据传递的数据值获得所需的行为。今天早上它奏效了，但是当我试图向朋友展示我所做的工作时，互动突然完全停止了。我没有收到任何错误消息。不知何故，.on(mouseover) .on(mouseout)和.on(click)事件出了问题。函数似乎没有被触发。我确定我保留了代码，因为它工作时。在过去的几个小时里，我试图找出问题所在。

function filterFor(data) {
  var expression = data;
  d3.selectAll("circle")
  .on("mouseover", mouseOver)
  .on("mouseout", mouseOut)
  .on("click", mouseClick);
  function mouseOver() {
    d3.select(this).style("fill", "#ff4747");
    div.transition()
      .duration(300)
      .style("opacity", 1.0);
    switch (expression) {
      case 'study':
        div.html(d.study)
          .style("left", (d3.event.pageX) + "px")
          .style("top", (d3.event.pageY - 50) + "px");
        d3.selectAll("circle").filter(function(d1, i) {
          return d1.study === d.study
        }).style("fill", "#ff4747");
        break;
      case 'year':
        div.html(d.year)
          .style("left", (d3.event.pageX) + "px")
          .style("top", (d3.event.pageY - 50) + "px");
        d3.selectAll("circle").filter(function(d1, i) {
          return d1.year === d.year
        }).style("fill", "#ff4747");
        break;
    }
  }
  function mouseOut(d) {
    console.log("mouseout fired");
    d3.select(this).style("fill", "#222222");
    d3.selectAll("circle").style("fill", "#222222");
  }
  function mouseClick(d) {
    console.log("mouseout fired");
    switch (expression) {
      case 'study':
        d3.selectAll('circle').each(function(d1) {
          if (d1.study !== d.study) {
            d3.select(this)
              .attr("r", d1.radius)
              .transition()
              .duration(500)
              .attr("r", 0)
              .each("end", function() {
                d3.select(this).remove();
              });
          } else {
            d3.select(this).attr("r", d1.radius)
              .transition()
              .duration(200)
              .attr("r", d1.radius * 1.5);
            force.charge(-100);
            force.start();
          }
        });
        break;
      case 'year':
        d3.selectAll('circle').each(function(d1) {
          if (d1.year !== d.year) {
            d3.select(this)
              .attr("r", d1.radius)
              .transition()
              .duration(500)
              .attr("r", 0)
              .each("end", function() {
                d3.select(this).remove();
              });
          } else {
            d3.select(this).attr("r", d1.radius)
              .transition()
              .duration(200)
              .attr("r", d1.radius * 1.5);
            force.charge(-100);
            force.start();
          }
        });
        break;
    }
    force.alpha([1.0]);
  }
}

这是我在这个平台上的第一个问题，希望有人可以帮助我。其他所有与 d3.js 相关的内容都工作正常。例如，生成节点并发生碰撞。问题必须出在鼠标事件中。

这就是它工作时的样子！