4

「 D3: Force Directed Graphs FDG でノードの円の遅い遷移を作成する方法は?」という以前の投稿で、 D3で単一の要素 (「円のみ」の半径など) を遷移する方法について素晴らしい回答を得ました。

私のフォローアップの質問は、「複数の D3 属性」を同時に移行する方法についてです...

念のため、ここでは D3 で生成されたラジオ ボタンを使用して、FDG レイアウトのノードのサイズを (マウス クリックで) デフォルト サイズからスケーリングされた大きさに切り替えています。ノード クラスタ ダイアグラムの左上にラジオ ボタンがあります( http://nounz.if4it.com/Nouns/Applications/A__Application_1.NodeCluster.html ) 。

ノードの円をデフォルトの数値とスケーリングされた大きさ (現在は遷移を使用) の間で切り替えるコードは次のようになります...

    var densityControlClick = function() {

      var thisObject = d3.select(this);
      var typeValue = thisObject.attr("density_type");
      var oppositeTypeValue = (function() {
        if(typeValue=="On") {
          return "Off";
        } else {
          return "On";
        }
      })();

      var densityBulletSelector = "." + "densityControlBullet-" + typeValue;
      var selectedBullet = d3.selectAll(densityBulletSelector);
      selectedBullet.style("fill", "Black") 

      var oppositeDensityBulletSelector = "." + "densityControlBullet-" + oppositeTypeValue;
      var selectedOppositeBullet = d3.selectAll(oppositeDensityBulletSelector);
      selectedOppositeBullet.style("fill", "White") 

      if(typeValue=="On") {
        var selectedNodeCircles = d3.selectAll("#NODE");
        selectedNodeCircles.transition().duration(500).attr("r", function(d){ return rRange(d.rSize); });
      }
      else {
        var selectedNodeCircles = d3.selectAll("#NODE");            selectedNodeCircles.transition().duration(500).attr("r", function(d) { if (d.id==focalNodeID) { return centerNodeSize; } else { return defaultNodeSize; } } );
      }

    }

すべてがうまく機能し、ラジオ ボタンを選択すると、ノードの遷移が遅くなることがわかります。ただし、D3 の動的な性質を誇示するために、半径やエッジの長さなどの複数の要素を同時に移行する方法と、その背後にある理論を学びたいと思います。

私の質問は、円の半径を正常に移行できることを考えると、「アルファ」、「摩擦」などの属性に基づいて、エッジの長さなどの他の要素をどのように移行するか、そして...背後にある理論は何ですか?複数の要素を遷移させる (つまり、コードは英語で何を意味するのか)? D3 API は、複数の属性を同時に移行する背後にある理論を明確に理解していないようです。

4

1 に答える 1

4

したがって、複数の属性を移行することは、この質問の簡単な部分です。通常の選択と同様に、トランジションで一度に複数の属性を設定できます。

selectedNodeCircles.transition().duration(500)
    .attr("r", function(d){ return rRange(d.rSize); })
    .attr("stroke", 'red');

これにより、半径と線の色が変わります。トランジションは DOM 要素 (この場合は円) のプロパティであり、好きなだけ DOM 属性をトランジションします。覚えておくべきことは、各 DOM 要素には遷移オブジェクトが 1 つしかないということです。したがって、別のものを作成すると、古いものは上書きされます。

// This will NOT work
circles.transition().duration(1000).attr('r', 50);
// The radius transition will be overridden by the fill 
// transition and so will not complete
circles.transition().duration(1000).attr('fill', 'red');

これは、進行中のアニメーションを中断して、アニメーションがどのくらい進行しているかを把握してから新しいアニメーションを開始することを心配する必要がないため、実際には非常に便利です。これは通常、自動的に処理されます。

あなたの場合、グラフのエッジの長さを遷移させたいと考えています。これらは、ノードの位置属性によって決まります。完成品から判断すると、これらの属性は既にアニメーション化されています。これは、おそらく tick() コールバックで、(トランジションではなく) レイアウト アルゴリズムの反復ごとに DOM を更新しているためです。

そのため、tick コールバック内でトランジションを使用できますが、これは奇妙に見え、半径トランジションとの同期を維持するのが面倒になる可能性があります (トランジションで両方の属性を設定する必要があります)。しかし、それはあなたが必要としているものかもしれません。

または、待つことができる場合は、tick コールバックで DOM を更新しないでください。レイアウトを完成させます。各ティックでレンダリングしないと、はるかに高速に実行されます。完了したら、半径と x および y 属性を最終位置にアニメートできます。もちろん、これは良い開始位置が必要になることを意味します。

于 2013-07-15T17:35:13.493 に答える