1

私は遷移を理解しようとしていて、複数のデータセットを操作したい D3 初心者です。他の質問を調べましたが、2 つのデータセットを使用するための答えが見つかりませんでした。このjsfiddleは、私がやろうとしていることを示しています。イントロ統計の学生がランダムなサンプルを描くのに役立つアプリを構築しています。確率 (ドーナツ チャートの一部) を設定し、サンプリングする描画数を選択します。するとドーナツが回転し、サンプルが円になって飛び出します。

2 つのデータセット: 1 つ (pieData) は、ドーナツ グラフの値とラベルを保持します。
別の (drawData) 360 から 720 までのランダムな値。最終的には両方とも R で生成され、RJSONIO と Shiny を使用して D3 に渡されます。（その部分は機能します、jsfiddleは問題を示しています）

svg オブジェクトに g.slices として添付したデータセット pieData に基づいて、ドーナツを円弧として定義しました。円を追加し、色を識別するための drawData を指定しました。

ドーナツの回転アニメーションには drawData が必要です。私のjsfiddleはforループで不器用にそれを行いますが、5つの異なる角度をそれぞれ1回見るのではなく、最後のドローの角度（5回）しか見ることができません。

私はいくつかの重要な点を理解していません: ループ内で関数を定義しましたが、これはダメだとわかっています。これは、ドーナツを正しい回数だけ回転させる描画回数のループですが、常に同じ角度 (最後の角度) です。

for (var i = 0; i < nDraws; i++) {
  ndx = i
  arcs.transition()
    .delay((slideDuration + spinDuration) * ndx)
    .duration(spinDuration)
    .ease("cubic-out")
    .attrTween("transform", function () {
    return d3.interpolateString("rotate( 0, 0, 0)",
        "rotate(" + spinAngle[ndx] + ", 0, 0)");
  });
}

「i」が渡されなかったため、関数内で使用する別のカウンターを作成しました。これは、正常に機能するサークルでの私の移行です。

circles.each(function(d,i){
   var  ndx = i ;
  d3.select(this).transition()
      //  toss out the circle
      .delay(spinDuration + (slideDuration + spinDuration) * ndx )
      .duration( slideDuration )
      .ease("linear")
      .attr("cx", function(d,i) { return ndx * spacing - w /2 ; })
      .attr("cy", 135)
      .attr("r", 20);
});

プログラムをうまく構成する方法についてのポイントがありません。例として私が見つけた最も近いものはchained transitionsです。この例から、円と弧の両方が共通の親に属する必要があり、親に 2 つの遷移を適用する必要があることがわかりました。

これらの質問については、助けていただければ幸いです。

1) 2 つのデータセットを (異なる列と異なる数の行で) 結合できますか?

2) ドーナツとサンプリングされた円の両方を含む親を作成するにはどうすればよいですか? また、2 つのデータセットをどのようにフィードしますか?

3) 機能が思いどおりに機能しません。私はオブジェクトを返そうとしていると思いますが、d3 は戻り値を関数にしたい (?)

すべてのピースを組み合わせる方法を学べる場所に、事前に感謝します。D3 プロットは素晴らしいです。

ジムRC

4

1 に答える 1

0

解決策を教えてくれた NoahRC に感謝します。コードの最初のブロックは、ループの前に "i" の関数を定義する必要があります。

var tween = function(i){
  arcs.transition()
  .delay((slideDuration + spinDuration) * i)
  .duration(spinDuration)
  .ease("cubic-out")
  .attrTween("transform", function (){
     return d3.interpolateString("rotate( 0, 0, 0)", 
                         "rotate(" +  data.spinAngle[i] + ", 0, 0)");
  });
  }

for( var i = 0; i < data.nDraws; i++){ 
    tween(i);
}

そして 2 番目のブロックは "i" を見つけます:

circles.each(function(d,i){
  d3.select(this).transition()
    .delay(spinDuration + (slideDuration + spinDuration) * i )
    .duration( slideDuration )
    .ease("linear")
    .attr("cx", function() { return i * spacing - w /2 ; })
    .attr("cy", 135)
    .attr("r", 20);
});

トレースは、私が data.nDraws + 1 に設定されていることを示したので、エクストラクタとしては機能しません。

于 2013-05-27T02:56:20.697 に答える