0

次のアークに d3.behavior.drag() を適用するにはどうすればよいですか?

var arc = d3.svg.arc()
    .innerRadius(50)
    .outerRadius(70)
    .startAngle(45 * (pi/180)) //converting from degs to radians
    .endAngle(3) //just radians

vis.append("path")
    .attr("d", arc)
    .attr("transform", "translate(200,200)")

円弧をドラッグできるようにしたい。SVG パス ベースのオブジェクトでドラッグ動作を使用するものを確認できませんでした (円、長方形などの基本的な要素のみ)。

ドラッグに関連して私が見つけることができる最も近いものはこれです: http://bl.ocks.org/mbostock/1557377

追加されたパス (.append("path")) に対して ".on("drag", dragmove) を実行しようとすると、"d" が未定義として出力されるように見えますが、".on("drag" 、dragmove)" をアーク自体に追加すると、イベントは発生していないように見えます...)

4

1 に答える 1

2

ドラッグは、ユーザーが作成し、その動作を実行する要素に適用する動作です。円弧に適用しても問題はありません。

したがって、アークで（翻訳にアクセスできるようにするためのマイナーな変更）：

var position = [200,200];

var arc = vis.append("path")
    .attr("d", arc)
    .attr("transform", "translate(" + position + ")");

必要な動作を作成することから始めます。ドラッグすると、円弧の移動が更新されます。

var drag = d3.behavior.drag()
    .on("drag", function(d,i) {
        position[0] += d3.event.dx;
        position[1] += d3.event.dy;
        d3.select(this)
        .attr("transform", function(d,i){
            return "translate(" + position + ")"
        })
    });

次に、動作をアークにアタッチします。

arc.call(drag);

ここで自分で試すことができます。

于 2013-03-08T23:17:46.437 に答える