4

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.attr("r", function(d){ return rRange(d.rSize); });
      }
      else {
        var selectedNodeCircles = d3.selectAll("#NODE");
        selectedNodeCircles.attr("r", function(d) { if (d.id==focalNodeID) { return centerNodeSize; } else { return defaultNodeSize; } } );
      }

    }

すべて正常に動作しますが、円の半径の遷移は瞬間的です。D3 のダイナミックな性質を誇示するために、トランジションを少し遅くしたいと思います。

上記のコードを変更して、円のサイズ/半径の遷移を遅くする方法を知っていますか? そして、コードの背後にある理論を理解できるように、英語で何が起こっているのか説明していただけますか? (注: API を読み取ろうとしましたが、トランジションを適用するのは簡単ではありません。)

ご協力いただきありがとうございます。それは有り難いです。

4

1 に答える 1

6

最も単純なバージョンでは、トランジションを選択範囲の単なる装飾と考えてください。コードを更新するには、次の場所に移動するだけです。

selectedNodeCircles.attr(...);

トランジションを挿入します。

selectedNodeCircles.transition().duration(1000).attr(...)

「r」属性をある数値から別の数値に変更しているだけなので、D3 は 2 つの値の間の遷移をアニメートします。ここで非常に単純化された例を見ることができます

コードで何が起こっているかというと、選択範囲内のすべての要素が r の新しい値を取得しています。属性が設定され、svg が再レンダリングされて完了です。

トランジションを追加すると、属性を直接設定する代わりに、選択の各要素に対して作成されるトランジションの終了値を設定します。実際、遷移中にデバッグすると、すべての円に __transition オブジェクトが表示されるはずです。

この遷移オブジェクトは、属性の初期値を読み取り、最終値を取得してから、時間の経過とともに 0 から 1 になるパラメーターに基づいて中間値を計算します。そのパラメータが 0 から 1 になるまでにかかる時間は、トランジションの継続時間の値によって異なります (0 から 1 になる方法は、その「イージング」機能によって異なります)。

詳細については、このチュートリアルもご覧ください

于 2013-07-11T22:15:24.057 に答える