角度でのドラッグによるD3ズームイベントの発射

Question

---

Tldr; SVGをドラッグすると、SVGが回転して翻訳されます。

---

私は角度のサービスの一環として、D3（V.4）を使用して、SVGグループのイベントをドラッグするとズームを実装しようとしています。

ドラッグするとSVGが翻訳されます。

drag = d3.drag() 
.on('start',() => { 
    console.log('drag start'); 
    this.setClickOrigin(d3.event); 
}) 
.on('drag', (d, i, n) => { 
    const target = d3.select(n[i]).node() as any; 
    const m = target.getCTM(); 
    const x = d3.event.x - this.clickOrigin.x; 
    const y = d3.event.y - this.clickOrigin.y; 
    this.setClickOrigin(d3.event); 
    this.translate(target, x, y); 
}); 

ズーム中にSVGが回転します。

zoom = d3.zoom() 
.on('zoom', (d, i, n) => { 
    const target = d3.select(n[i]).node() as any; 
    const m = target.getCTM(); 
    const b = target.getBBox(); 
    const dir = (d3.event.sourceEvent.deltaY > 0) ? 1 : -1; 
    this.rotate(target, dir); 
}); 

元のコードは正常に機能しました。しかし、これをAngularに統合すると、いくつかの問題が発生しました。

unitGroupをドラッグすると、zoomイベントがdragイベントとともにトリガーされるという問題があります。

予想される動作は、その：

• 「クリック・アンド・ドラッグ」は、x及びy寸法が小さく、暗灰色のボックスを変換します。
• 'mouse-wheel-scroll'は、その中心を中心に小さくて暗い灰色のボックスを回転させます。ここで

---

Plunkerさ：実際には、何をここで見ていることは予想される動作であるhttps://embed.plnkr.co/0GrGG7T79ubpjYa2ChYp/

Answer 1

。

D3では、d3.zoom()はズームだけでなくパンも処理します。したがって、mousemoveはd3.drag()によって処理されており、ズーム機能も備えています。

ボストック（D3作成者）がかつて言ったように：

は、これら2つの動作を組み合わせる*ジェスチャ解釈が曖昧と位置に非常に敏感であることを意味します。 （*ズームとドラッグ）

ズーム機能ではズームが実際にズームされているかどうかをチェックするのが最も簡単な解決策です。ホイール）、リターン：https://plnkr.co/edit/jz5X4Vm9wIzbKmTQLBAT?p=preview