1

d3.jsを使用して作成しているグラフの各ノードの半径を変更できるようにしたいと考えています。ただし、各ノードの半径を一度に 1 つずつ変更したいと考えており、ノードのシーケンスとともに各変更間の遅延を制御できるようにしたいと考えています。

今のところ、これは私がコードに関して持っているものです:

var nodes = svg.selectAll(".node");
nodes.each(function() { 
  d3.select(this).
  transition().
  delay(100).
  attr("r", "5") 
});

これは、次のリンクのコードを使用するだけで複製できます: http://bl.ocks.org/mbostock/4062045。上に貼り付けたコードは、前述のリンクのコードに追加しただけです。

これを実行するnodesと、グラフ内のすべてが同時に遷移します。つまり、サイズ (半径) が同時に大きくなります。ただし、一度に 1 つずつサイズ (半径) を変化させたいと考えています。私は制御できるようにしたいことを繰り返します：

  1. と delayそれぞれの遷移の間node
  2. nodesトランジションを受ける 順序。

ポインタ、チュートリアル、またはその他のスタックオーバーフローの回答も素晴らしいでしょう。理想的には、いくつかのコード例が必要です。

オンライン参照に関して私が最も近いのは、d3.js遷移に関するチュートリアルのこのサブセクションです: http://bost.ocks.org/mike/transition/#per-element。ただし、具体的なコード例がありません。私は、一般的にd3.jsとjavascriptが初めてなので、具体的なコード例なしではそれを理解できません。

4

1 に答える 1

4

これは、各ノードのインデックスに基づいて遅延を計算することで、非常に簡単に行うことができます。Mike Bostock は、そのような実装の例をここに持っています。これは関連するコードです：

var transition = svg.transition().duration(750),
    delay = function(d, i) { return i * 50; };

transition.selectAll(".bar")
    .delay(delay)
    .attr("x", function(d) { return x0(d.letter); }); // this would be .attr('r', ... ) in your case

トランジションの順序を制御するには、必要なアニメーション フローが要素のインデックスに反映されるように配列を並べ替えるだけです。配列をソートする方法を確認するには、JavaScript のarray.sortメソッドに関するドキュメントを参照し、D3 API リファレンスの配列 > 順序付けセクションも参照してください。

于 2013-03-10T08:27:36.137 に答える