1

次の例に基づいて、ノード上で現在のノードに接続されていない要素がフェードアウトする力指向グラフがあります。問題は、カーソルが高速で移動し、ターゲットノードの接続の一部ではないリンクを横切る場合、交差リンクのマウスオーバーが途中でトリガーされるため、完全に不透明な状態で表示されることですが、明らかにマウスアウト機能を完了します。たとえば、これを見ることができます： フェージングの問題

写真では、マウスが上から下に速く移動し、カーソルがHSA-MIR-424で停止しています。ターゲットノードへの接続は正しく表示されますが、カーソルがそれらを横切るとマウスオーバーがトリガーされるため、3つの追加リンクも表示されます。同じノードに対して上から下への動きをゆっくりと繰り返すか、ノードに対して下から上へ移動する場合、そのような問題は見られません（写真では、その方向に交差するリンクがないため）。

この問題をどのように回避できますか？

コードの関連部分、マウスオーバー/マウスアウトをリンクします。

    .on("mouseover", function(d) {
      var selection = d3.select(this);
      var initialWidth = Number( selection.style("stroke-width") );
      selection.transition().style("stroke-width", initialWidth + Number(4) )
      .style("stroke-opacity", 1.0);
      //.style("stroke", linkOverColor);
    } )
    .on("mouseout", function(d) {
      var selection = d3.select(this);
      selection.transition().style("stroke-width", getLinkStroke( selection.data()[0] ) )
      .style("stroke-opacity", conf.link_def_opacity);
    })

ノードのマウスオーバー/マウスアウト：

    // display closest neighbors and fade others out
    .on("mouseover", fade(0.10) )
    // return to default view
    .on("mouseout", fade(conf.node_def_opacity) );

フェージング機能：

    function fade(opacity) {
      return function(d) {

        d3.event.stopPropagation();

        var thisOpacity;

        // return to default view
        if( opacity === conf.node_def_opacity )
        {
          d3.selectAll('marker > path').transition().style("opacity", 1);
          nodeGroup.transition().style("opacity", conf.node_def_opacity);
          link.style("stroke-opacity", conf.link_def_opacity);
        }
        else // fade not-neighborhood away
        {
          d3.selectAll('marker > path').transition().style("opacity", 0);
          // d3.selectAll('marker > path').transition().style('display', 'none');
          nodeGroup.transition().style("opacity", function(o)
          {
            thisOpacity = isConnected(d, o) ? conf.node_def_opacity : opacity;
            return thisOpacity; 
          });

          link.style("stroke-opacity", function(o) {
            return o.source === d || o.target === d ? conf.link_def_opacity : opacity;
          });              
        }
      }
    }
4

1 に答える 1

0

この問題は、ノードとリンクのマウスオーバーアクションにタイマーを導入することで解決されました。コードはこの回答にリストされています。

于 2012-11-01T15:08:00.837 に答える