d3.jsマウスイベントが機能しない

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-インデックスを与えることに決めました。だから私のマウスイベントは一切発生しませんでした。

フィヨルドの先端のechonaxに感謝します。そこにコードを解剖することでそれを解明しました。