Question

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

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 + ')')
}

拖动事件有效，但每次拖动对象时都会有一个初始“跳转”（例如，矩形从光标左侧开始，然后突然向右跳转）。

您可以在此处查看：https://jsfiddle.net/alexcheninfo/5rnv7ww5/

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

Answer 1

应该是这样的：

<link rel="canonical" href="https://example.com/" />

工作代码here

当你做

时

//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];

它会将矩形转换为鼠标位置，从而跳转。

Answer 2

您需要指定拖动行为的origin。默认情况下，使用基础数据对象。在你的情况下 - 它是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;
    // ...
}

查看更新的fiddle。

在d3 v4中，这称为drag subject。

最初的“跳跃式”拖动行为

2 个答案: