d3.js鼠標事件不起作用

我有以下問題：我製作了一個只包含節點呈現爲圓形的力圖。一切工作正常，我可以改變懸停的顏色，點擊它們並刪除一些。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相關工作正常。例如節點被生成並且碰撞起作用。問題必須存在於鼠標事件中。

This is what it looked like when it worked!

來源

2016-04-23 Jannik Keye

你能在小提琴中重現嗎？ – echonax

我想出了自己。 javascript沒有任何問題。我顯然是一個阻礙，並決定給svg的容器一個負面z-索引。不得不用小提琴弄清楚，所以非常感謝你，先生。 –

很高興你知道了:) – echonax