d3.js mouse events not working

问题

I have the following problem: I made a force graph containing of only nodes rendered as circles. Everything worked fine, I could change the color on hover, click on them and delete some.

I wrote this function to get the desired behavior depending on which data value is passed. It worked this morning but when I tried to show a friend what I had made suddenly the interaction stopped working completely. I don't get any error messages. Somehow something is wrong with the .on(mouseover) .on(mouseout) and .on(click) events. The functions don't seem to be fired. I am sure that I left the code as it was when it was working. I have tried figuring out the problem for the past couple of hours.

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]);
  }
}

This is my first question on this platform, hopefully someone can help me. Everything else d3.js related is working fine. For example the nodes are generated and collision works. The problem must lie within the mouse events.

This is what it looked like when it worked!

回答1:

I found the problem in my css file. For whatever reason I at some point decided to give the container of the svg a negative z-index. So none of my mouse events fired.

Thanks to echonax for the tip with the fiddle. Figured it out by dissecting the code there.

来源：https://stackoverflow.com/questions/36814278/d3-js-mouse-events-not-working