使用d3.behavior.drag（）和transform時，“Stuttering”拖動

Question

我正在嘗試使用d3.js的d3.behavior.drag() drag事件來更新我的數據模型（不立即設置元素位置），然后運行我的“繪圖”功能，根據更新的模型更新所有元素。 另外，我在包含組元素上使用translate transform以移動與拖動對象關聯的所有元素（我從下面鏈接的示例中刪除了額外的元素）。 這會導致拖動的元素在拖動時停滯不前，拖動它的速度越快，效果越差。

請參閱jsFiddle上的這個精簡示例 。

這是示例的代碼：

blocks = [
  { x: 0, y: 0 }
];

drag = d3.behavior.drag()
  .origin(Object)
  .on("drag", function(d) {
    d.x = d3.event.x;
    d.y = d3.event.y;
    draw();
  });

svg = d3.select("body")
  .append("svg:svg")
  .attr("width", 600)
  .attr("height", 600);

function draw() {
  g = svg.selectAll("g")
    .data(blocks);

  gEnter = g.enter().append("g");

  g.attr("transform", function(d) { return "translate("+d.x+","+d.y+")"; });

  gEnter.append("rect")
    .attr("height", 100)
    .attr("width", 100)
    .call(drag);
}

draw()​;

Answer 1

您正在調用rect元素上的drag ，但您正在轉換其父元素： g元素。

問題是拖動組件使用相對於父級的鼠標位置來確定新的d3.event.x和d3.event.y 。 因此，如果您在用戶拖動時移動（即transform ）父級，則事情會變得混亂。

解決方案是在您移動的同一元素上調用drag ; 在這種情況下， g元素：

function draw() {
  g = svg.selectAll("g")
    .data(blocks);

  gEnter = g.enter().append("g")
    .call(drag);

  g.attr("transform", function(d) { return "translate("+d.x+","+d.y+")"; });

  gEnter.append("rect")
    .attr("height", 100)
    .attr("width", 100);
}

見糾正的小提琴： http ： //jsfiddle.net/EMNGq/14/

Answer 2

我和達爾文有同樣的問題。 拖動處理程序位於附加了D3數據的子對象上，但轉換需要應用於父組（而不是d3）。

我通過將origin函數設置為返回x：0，y：0然后在事件中使用x值而不是dx來解決它。

例如

var drag = d3.behavior.drag()
    .origin(function(d,i) { return {x:0, y:0}; })
    .on("drag", function (d) {  movePosition(d3.event.x);   });

Answer 3

Nautat為您的案例提供了很好的解決方案。

我的情況稍微復雜一些。 我的數據綁定在我要轉換的g節點下面。 在這種情況下，我不能簡單地將.call（拖動）移動到g級別。

我提交了一個pull請求來定制基本坐標空間： https ： //github.com/mbostock/d3/pull/1055