D3變焦事件在Angular中拖動

Question

---

Tldr; 拖動SVG會導致它旋轉和翻譯。

---

我正在嘗試使用D3（v.4）作為Angular服務的一部分在SVG組上實現拖動和縮放事件。

this.unitGroup = this.svg.append('g')
  .attr('id', 'unitGroup')
  .call(this.drag)
  .call(this.zoom);

拖動轉換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維度中的小的深灰色框。
• '鼠標滾輪'將小而深灰色的盒子圍繞其中心旋轉。

---

這是一個Plunker： https ：//embed.plnkr.co/0GrGG7T79ubpjYa2ChYp/

Answer 1

實際上，你在這里看到的是預期的行為。

在D3中， d3.zoom()不僅處理縮放，還處理平移。 因此， d3.drag()由d3.drag()和縮放功能處理。

正如Bostock（D3創造者）曾經說過：

結合這兩種行為*意味着手勢解釋模糊不清，對位置高度敏感。 （*縮放和拖動）

在我的腦海中，最簡單的解決方案就是檢查縮放功能中是否有“真正的”縮放（鼠標滾輪），如果沒有（沒有鼠標滾輪），則返回：

if(!d3.event.sourceEvent.deltaY) return;

以下是您的更新內容： https ：//plnkr.co/edit/jz5X4Vm9wIzbKmTQLBAT？p = preview