如何防止 d3.drag().on('end' 触发 .on('click'

我有一个 svg 元素，我希望能够单独单击和拖动。据我所知在 D3 中，单击会触发“拖动结束”事件（也可能拖启动？）。在下面的代码中，只需单击圆圈即可为其显示红色轮廓：

var svg = d3.select('body').append('svg');
var g = svg.append('g');

var c = g.append('circle').attr('r', 20).attr('cx', 25).attr('cy', 25)
         .call(d3.drag().on('drag', dragged).on('end', end))
         .on('click', clicked);

function dragged() {
    d3.select(this).attr('fill', 'green').attr('cx', d3.event.x).attr('cy', d3.event.y);
}

function end() {
    d3.select(this).attr('fill', 'red').attr('stroke', 'red').attr('stroke-width', 5);
}

function clicked() {
    if (d3.event.defaultPrevented) return;
    d3.select(this).attr('fill', 'blue');
}

fiddle https://jsfiddle.net/hj21t40n/7/

如何注册点击回调而不触发drag.end回调？

似乎大多数有关单击和拖动的问题和块似乎都想抑制拖动时的单击操作，因此不相关。

• d3v5.7（当前）

由于 mouseup 指示单击完成和拖动结束，您可以跳过单击事件并简单地添加一些逻辑来确定是否发生拖动：

// track action:
var wasMoved = false;

// Drag event:
function dragged() {
    d3.select(this).attr('fill', 'green').attr('cx', d3.event.x).attr('cy', d3.event.y);
    wasMoved = true; // or alternatively, measure the change in distance.
}

// Mouse up event: drag end & click:
function end() {
  if(wasMoved) {
  // It was a drag:
        d3.select(this).attr('fill', 'red').attr('stroke', 'red').attr('stroke-width', 5);
  }
  // Otherwise it was a click:
  else {
    d3.select(this).attr('fill', 'blue');
  }
  wasMoved = false; // reset for next drag.
}

现在我们只能在鼠标松开时触发一项操作：拖动结束或单击时我们想要的操作：

var svg = d3.select('body').append('svg');
var g = svg.append('g');

var drag = d3.drag().on("drag", dragged).on("end",end);

var c = g.append('circle')
  .attr('r', 20).attr('cx', 25).attr('cy', 25)
  .call(drag)

var wasMoved = false;

function dragged() {
	d3.select(this).attr('fill', 'green').attr('cx', d3.event.x).attr('cy', d3.event.y);
  wasMoved = true;
}

function end() {
  if(wasMoved) {
  // It was a drag:
		d3.select(this).attr('fill', 'red').attr('stroke', 'orange').attr('stroke-width', 5);
  }
  // It was a click:
  else {
    d3.select(this).attr('fill', 'blue');
  }
  wasMoved = false;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.0.0/d3.min.js"></script>