1

次のアニメーションの開始点として使用できるように、アニメーションの後に D3 オブジェクトのキャンバスの場所 (cx/cy) にアクセスして保存するにはどうすればよいですか?

次の入力トランジションがあります。

var enterTransition = enter.transition()
    .duration(duration)
    .delay(function(d, i) { return i * delay; })
    .attr("cx", function(d, i) { return Math.random()*width; })
    .attr("cy", function(d, i) { return Math.random()*height; });

その結果、ノードがどこにあるのか本当にわかりません。

ノードには子があり、結果として「クリック」イベントが発生する場合があります。ユーザーがノードをクリックすると、ノードの新しいバッチが親で開始され、そこからランダム化されます。ノード（「バブル」）を次のように定義します...

var bubbles = vis.insert("svg:g")
    .attr("class", "enter")
  .selectAll("g")
    .data(d.children)
  .enter().append("svg:circle")
    .attr("stroke", "black")
    .attr("fill", function(d, i) { return colors(i); })
    .attr("cx", function(d, i) { return d.cx0; })  // for illustration purposes
    .attr("cy", function(d, i) { return d.cy0; })  // for illustration purposes
    .attr("r", function(d, i) { return rScaled(d.duration); })
    .style("cursor", function(d) { return !d.children ? null : "pointer"; })
    .on("click", down);

My d.cx0andd.cy0は、親ノードの cx/cy を表します。

アニメーションの後にこの情報を取得し、参照用に保持するにはどうすればよいですか?

4

1 に答える 1

1

あなたが設定するために持っている機能"cx"で"cy"：

.attr("cx", function(d, i) { 
  // In here, the "this" keyword refers to the svg circle. So:
  var parent = this.parentNode;// That's the parent you're interested in
  return d3.select(parent).attr('cx');
})

(自分が持っているものと達成しようとしていることに十分に精通していないため、親の属性を読み取ることに依存しない、これを達成するためのより適切な方法があるかもしれませんが、これは一種のコストがかかると思います)。

于 2012-11-12T22:35:13.353 に答える