Javascript 首字母“；“神经质”；拖动行为

下面的代码创建一个背景和一个矩形。可以拖动矩形：

var p = {
  x: 0,
  y: 0
} 

var width = 400
var height = 400

var svg = d3.select('body').append('svg')
  .attr('width', width)
  .attr('height', height)

svg.append('rect')
  .attr('class', 'bg')
  .attr('width', width)
  .attr('height', height)

var drag = d3.behavior.drag()
  .on('drag', dragmove)

svg.append('rect')
  .attr('class', 'btn')
  .attr('width', 100)
  .attr('height', 50)
  .attr('transform', 'translate(' + p.x + ',' + p.y + ')')
  .call(drag)

function dragmove (d) {
  var x = d3.event.x
  var y = d3.event.y
  d3.select(this)
    .attr('transform', 'translate(' + x + ',' + y + ')')
}

拖动事件起作用，但每次我拖动对象时都会有一个初始“跳跃”（例如，矩形从光标的左侧开始，然后突然跳到右侧）

你可以在这里看到：

是什么导致了它以及如何防止它（使矩形从一开始就被平滑地拖动）？

应该是这样的：

//get the translate on the dragged rectangle
var translate = d3.transform(d3.select(this).attr("transform")).translate;
//to that add the mouse move deltax 
                x = d3.event.dx + translate[0],
                y = d3.event.dy + translate[1];

工作代码

当你这样做的时候

var x = d3.event.x
  var y = d3.event.y
  d3.select(this)
    .attr('transform', 'translate(' + x + ',' + y + ')')

它会将矩形平移到鼠标位置，从而跳转。

您需要指定拖动行为的类型。默认情况下，将使用基础数据对象。在您的例子中，它是

p

对象。因此，您需要这样做：

var drag = d3.behavior.drag()
    .origin(function() { return p; })
    .on('drag', dragmove)

并在每次拖动时更新其x和y属性

function dragmove (d) {
    // ...
    // normally you would update d.x and d.y
    p.x = d3.event.x;
    p.y = d3.event.y;
    // ...
}

见更新

---

在D3V4中，这被称为。

这是因为它遵循鼠标坐标。如果你点击广场最左上角，它不会跳。谢谢！我假设鼠标的位置正好在指向部分。我没想到这个职位会落后。或者可能是因为矩形的中心不是在中间，而是在左上角。