変換を行う方法：d3のtranslate-drag関数をより滑らかにするには？

Question

this JSFiddle私はsvgに要素を実装しました。私は要素のグループをドラッグ可能にしたいと私はd3.dragでそれを試して、transform:translateを使用しています。ドラッグがスムーズではありません。それはちらちらして、こことそこに飛びます。

どのような理由があり、どのように克服できますか？次のように

ドラッグ機能は次のとおりです。

var dragcontainer = d3.drag() 
    .on("start", function() {}) 
    .on("drag", function(d, i) { 
    var x = d3.event.x; 
    var y = d3.event.y; 
     d3.select(this.parentNode.parentNode).attr("transform", "translate(" + x + "," + y + ")"); 
    }) 
    .on("end", function() {}); 

Answer 1

代わりに異物のdivにドラッグリスナーを取り付ける：

d3.select("#input-container-div").call(dragcontainer); 

は、このようなSVGグループに追加します。

d3.select(d3.select("#input-container-div").node().parentNode.parentNode).call(dragcontainer); 

第2に、d3.event.x/d3.event.yの代わりに

var x = d3.event.x; 
var y = d3.event.y; 

dxとdyを使用して、マウスの動きの違いを取得し、将来のドラッグで保存します。このよう

：

this.x = this.x || 0;//reset if not there 
    this.y = this.y || 0; 

    this.x += d3.event.dx; 
    this.y += d3.event.dy; 
    d3.select(this).attr("transform", "translate(" + this.x + "," + this.y + ")"); 

作業コードhere