d3拖動行為：在拖動名稱空間中注冊，監聽和觸發不同類型？

Question

輸入d3.behavior.drag()讓我感到困惑。 我想指定拖動類型，以便不同的對象觸發不同的拖動事件。 我習慣使用D3調度/命名空間進行以下操作：

1. 向D3分發對象注冊它們
2. 然后使用類似.on('click.typeHere')來監聽調度事件
3. 並使用dispatch.typeHere(<<data>>)觸發事件。

我不知道正常的分派過程如何應用於拖動行為。 例如：

 var svg = d3.select('svg').append('g') .attr('transform','translate(0,20)'); svg.append('rect') .attr('height', 50) .attr('width', 20) .style('fill', 'steelblue'); var drag = d3.behavior.drag(); drag.on('drag', function() { console.log('drag'); }).on('drag.type', function() { console.log('namespace active'); }).on('drag.type2', function() { console.log('namespace2 active'); }); svg.append('circle') .attr('cx',20) .attr('cy',0) .attr('r',10) .style('fill', 'orange') .call(drag); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> <svg></svg> 

我希望圓圈在drag.type時僅觸發drag.type ，而不觸發在拖動行為名稱空間中注冊的其他拖動。 但是不支持.call(drag.type) 。 解決這個問題的正確方法是什么？

Answer 1

對於不同類型的對象，我將使用不同的拖動行為，並由各自的拖動處理程序執行適當的操作。 這將使您不必去弄亂事件名稱空間：

var drag1 = d3.behavior.drag()
.on('drag', function() {
  console.log('drag rect');
});

svg.append('rect').call(drag1);

var drag = d3.behavior.drag()
.on('drag', function() {
  console.log('drag circle');
});

svg.append('circle').call(drag);

在此處完成演示。