0

要素にすばやくマウスを合わせると、最終結果は予測できなくなります。

この問題を防ぐために D3 でトランジションをレイヤー化する方法はありますか?それとも、要素を遠くに配置するなどの対処が必要ですか?

また、要素を継続的に移動すると正しい状態に更新されるようにmousemoveを使用してみましたが、移動すると要素が大きくなり（静的な数値に設定されていても）、ちらつきも多くあります。

これが私の対話のすべてです。これは、円に配置された楕円の集まりであり、テキスト ラベルとパスが互いに接続されています。(D3 のバンドル レイアウト)。マウスオーバーすると、マウスオーバーしたものと関連する接続されたノードとパスのみが表示されます。ただし、楕円から楕円に非常に速く移動すると、楕円のサイズが変化しますが、パスは予測できなくなります。意図的に楕円の外にマウスを出し、リスナーのいない領域から戻す必要があります。

 nodeGroup.on("mouseenter",function(){

  //hides ALL circles 
  svg.selectAll("ellipse")
     .style("opacity","0");

  //reshow the one you mouse over
  d3.select(this).select("ellipse")
    .style("opacity","1")
    .transition()
    .attr("rx", magnifiedCircle)
    .attr("ry", magnifiedCircle/2);

  //make text bigger
  d3.select(this).select("text")
    //.transition()
    .style("font-size","25");

  //remove all paths (draw relevant ones below)
  d3.selectAll("path")
    .style("opacity",0);

  //name of selected node
  var thisID = (d3.select(this).attr("id"));

  //draw alls path related to selected node
  nodeGroup.selectAll("path")
           .style("opacity", function(d,i){
              if(d[0] == thisID){

                  //draw related circles
                  svg.selectAll("#Circle_" + trimWhitespace(d[1]))
                     .style("opacity", 1);
                  svg.select("#Circle_" + trimWhitespace(d[0]))
                     .style("opacity", 1);

                return 1;
              }
              else 
                return 0;
           });
4

1 に答える 1

0

わかりました、マウス終了のトランジションを削除して修正しました。出口の一般的な経験則として、競合状態が発生する可能性がある期間がないように、遷移があってはならないと思います。発生する可能性がある唯一の問題は、重複したリスナーです。

マウスムーブがテキストを継続的に成長させる理由や、ちらつきが発生する理由はまだわかりません。

于 2013-06-25T14:09:55.220 に答える