D3.js 调用Drag时停止追加元素

我有一个简单的文档，其中用户在当前鼠标坐标处创建矩形。从这一点上，用户可以拖动矩形到一个新的位置。像这样：

var svg = d3.select('body')
    .append('svg')
    .attr('width',800)
    .attr('height',800)
    .on('click',function() {return draw_rect(d3.mouse(this))});

function draw_rect(position) {
svg.append('rect')
    .attr('height',100)
    .attr('width',150)
    .attr('x',(position[0]-75))
    .attr('y',(position[1]-50))
    .attr('opacity',.3)
    .attr('fill','lightgray')
    .attr('stroke','darkgray')
    .call(dragObject);
}

var dragObject = d3.behavior.drag()
    .on('dragstart', function() {
        d3.event.sourceEvent.stopPropagation();
    })
    .on('drag', function() {
        d3.select(this).attr('x',(d3.mouse(this)[0]-75).attr('y',(d3.mouse(this)[1]-50)
    });

---

问题是，只要拖动完成，就会附加另一个rect。从逻辑上讲，这是有道理的，拖动就像一个缓慢的点击。根本不知道如何解决这个问题。我正在考虑添加一个bool，但我想不出一个合适的。

您的

单击事件中缺少此选项：

.on('click', function() {
    if (d3.event.defaultPrevented) return;
    draw_rect(d3.mouse(this))
});

除此之外，您不需要返回：只需调用
draw\u rect

以下是您的更新代码：


var svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，800）
.attr（'height'，800）
.on（'单击'，函数（））{
if（d3.event.defaultPrevented）返回；
直接绘制（d3.鼠标（此））
});
函数绘制（位置）{
append（'rect'）
.attr（'height'，100）
.attr（'width'，150）
.attr（'x'，（位置[0]-75））
.attr（'y'，（位置[1]-50））
.attr（'opacity'，.8）
.attr（'填充'，'浅灰色'）
.attr（'stroke'，'darkgray'）
.call（dragObject）；
}
var dragObject=d3.behavior.drag（）
.on（'dragstart'，function（）{
d3.event.sourceEvent.stopPropagation（）；
})
.on（'drag'，function（））{
d3.选择（this）.attr（'x'，d3.鼠标（this）[0]-75）.attr（'y'，d3.鼠标（this）[1]-50）
});