Question

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

我编写了这个函数来获取所需的行为，具体取决于传递的数据值。它今天早上工作，但当我试图向朋友展示我突然发生的事情时，交互完全停止了。我没有收到任何错误消息。某种程度上.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相关的其他工作正常。例如，生成节点并且冲突起作用。问题必须在鼠标事件中。

This is what it looked like when it worked!

Answer 1

我在我的css文件中发现了这个问题。无论出于何种原因，我在某个时候决定给svg的容器一个负的z-index。所以我的鼠标事件都没有被解雇。

感谢echonax提供小提示。通过在那里解析代码来弄清楚它。

d3.js鼠标事件不起作用

1 个答案: