3

d3js を使用して、サークル アイテムのドラッグとズームの両方のイベント ハンドラーを実装しようとしています。以下に示すように、両方のイベントの動作を追加しました

var circle = svg.append("circle")
    .attr("fill", "green")
    .attr("opacity", 0.6)
    .attr("cx", 100)
    .attr("cy", 100)
    .attr("r", 13)
    .call(d3.behavior.drag().on("drag", drag))
    .call(d3.behavior.zoom().on("zoom", zoom));

オブジェクトをズームしなくても、ドラッグは正常に機能します。オブジェクトをズームイン/ズームアウトした後、ドラッグは機能しませんが、マウスダウンを含むすべてのイベントは「ズーム」イベントとしてキャッチされます。

完全なソースについては、 http://jsfiddle.net/xTaDC/を参照してください。

「d3.behavior」を理解していなかったようです。https://github.com/mbostock/d3/blob/master/examples/mercator/mercator-zoom-constrained.htmlは、ズーム ハンドラーのみを提供し、ドラッグとズームの両方を処理します。

ここで何が間違っていますか？

4

4 に答える 4

4

同様の問題に直面し、ズームの他のサブイベントをオーバーライドして解決しました。

ズームおよびドラッグ イベント リスナーの後に以下のコードを追加します。

.on("mousedown.zoom", null)
.on("touchstart.zoom", null)
.on("touchmove.zoom", null)
.on("touchend.zoom", null);

したがって、完全なコードは次のようになります

var circle = svg.append("circle")
    .attr("fill", "green")
    .attr("opacity", 0.6)
    .attr("cx", 100)
    .attr("cy", 100)
    .attr("r", 13)
    .call(d3.behavior.drag().on("drag", drag))
    .call(d3.behavior.zoom().on("zoom", zoom))
    .on("mousedown.zoom", null)
    .on("touchstart.zoom", null)
    .on("touchmove.zoom", null)
    .on("touchend.zoom", null);
于 2014-05-14T07:09:43.040 に答える
4

私の知る限り、d3 のズーム動作は既にドラッグを処理しているため、ドラッグは冗長です。ズームの d3.event.translate (2 要素配列であるため、x 値のみを取得する場合は d3.event.translate[0] に移動できます) を使用して、ドラッグ先の機能を複製してみてください。あなたのズーム。

追加のヒント: 作業を簡単にするために、ドラッグしようとしているものの親に呼び出し (ズーム) を適用するようにしてください。これにより、ぎくしゃくした動作が防止されます。

ソースはもちろん、d3 wiki です。"このビヘイビアーは、コンテナー要素でのズームとパンのジェスチャを処理するイベント リスナーを自動的に作成します。マウス イベントとタッチ イベントの両方がサポートされています。" https://github.com/mbostock/d3/wiki/Zoom-Behavior

于 2012-12-04T17:21:29.923 に答える
0

機密性の高いイベント領域を使用してグラフを追加します (最後の追加である必要があります)。

var rect = svg.append("svg:rect")
    .attr("class", "pane")
    .attr("width", w)
    .attr("height", h);

AFTER (含まない) このエリアにイベント管理を追加

rect.call(d3.behavior.zoom().x(x).scaleExtent([0.5, 4]).on("zoom", draw));

そして描画機能は

function draw() {
    svg.select("g.x.axis").call(xAxis);
    svg.select("g.y.axis").call(yAxis);
    svg.select("path.area").attr("d", area);
    svg.select("path.line").attr("d", line);
}

この例を参照してください: https://groups.google.com/forum/?fromgroups=#!topic/d3-js/6p7Lbnz-jRQ%5B1-25-false%5D

于 2013-02-17T22:45:41.400 に答える