Question

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

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，但我想不出一个适合的。

Answer 1

您在click事件中遗漏了这一点：

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

除此之外，您不需要return：只需致电draw_rect。

这是您更新的代码：

var svg = d3.select('body')
  .append('svg')
  .attr('width', 800)
  .attr('height', 800)
  .on('click', function() {
    if (d3.event.defaultPrevented) 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', .8)
    .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)
  });

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

在调用Drag时停止追加元素

1 个答案: