d3 JavaScriptライブラリのドラッグ動作のOrigin（drag.origin）の設定方法

Question

d3フレームワークを使用して、HTMLテキストと背景矩形で構成されるグループのドラッグ動作を実装しようとしています。 drag.originを設定していないときにマウスの位置/要素の座標オフセットによって目立つジャンプを見ることができますが、私はそれを働かせることができました。正確に記載されている方法d3 wiki-page このページでは、ドラッグするためのOriginの設定方法について説明しましたが、私の例ではどのように実装するのかを正しく理解していません。私は2つの異なるアプローチを試みました：要素を一緒にグループ化し、toseを保持する新しい要素を定義するための要素を使用します。最初のケースではtranslate-functionを使用する必要があり、グループの座標を取得する方法もわかりません。私は非常に任意の説明をいただければ幸いです

var svg = d3.select("body").append("svg") 
    .attr("width", 960) 
    .attr("height", 500); 

var group = svg.append("svg:g") 
    .attr("transform", "translate(10, 10)") 
    .attr("id", "group"); 

var rect1 = group.append("svg:rect") 
    .attr("rx", 6) 
    .attr("ry", 6) 
    .attr("x", 5/2) 
    .attr("y", 5/2) 
    .attr("id", "rect") 
    .attr("width", 250) 
    .attr("height", 125) 
    .style("fill", 'white') 
    .style("stroke", d3.scale.category20c()) 
    .style('stroke-width', 5); 


var html1 = group.append("foreignObject") 
    .attr("x", 50) 
    .attr("y", 25) 
    .attr("width", 200) 
    .attr("height", 100) 
    .attr("id", "fobject") 
    .style("border-color", d3.scale.category20c()) 
    .append("xhtml:div") 
    .style("font", "14px 'Helvetica Neue'") 
    .html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam."); 

var innerSvg = svg.append("svg") 
    .attr("x", 500) 
    .attr("y", 10) 
    .attr("id", "innerSvg"); 

var rect2 = innerSvg.append("svg:rect") 
    .attr("rx", 6) 
    .attr("ry", 6) 
    .attr("x", 5/2) 
    .attr("y", 5/2) 
    .attr("id", "rect") 
    .attr("width", 250) 
    .attr("height", 125) 
    .style("fill", 'white') 
    .style("stroke", d3.scale.category20c()) 
    .style('stroke-width', 5); 

var html2 = innerSvg.append("foreignObject") 
    .attr("x", 50) 
    .attr("y", 25) 
    .attr("width", 200) 
    .attr("height", 100) 
    .attr("id", "fobject") 
    .style("border-color", d3.scale.category20c()) 
    .append("xhtml:div") 
    .style("font", "14px 'Helvetica Neue'") 
    .html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam."); 

var drag1 = d3.behavior.drag() 
    .on("drag", function(d,i) { 
     d3.select(this).attr("transform", function(d,i){ 
      return "translate(" + [ d3.event.x,d3.event.y ] + ")" 
     }) 
    }); 

var drag2 = d3.behavior.drag() 
    .on("drag", function(d,i) { 
     d3.select(this) 
     .attr("x", d3.event.x) 
     .attr("y", d3.event.y); 
    }); 

group.call(drag1); 
innerSvg.call(drag2); 

は、自然に私はここで働い例を準備：http://jsfiddle.net/Y8y7V/

Answer 1

あなたは単にそれに応じorigin()機能を設定する必要があります。後者の場合、これは簡単です。最初のケースでは、座標変換と変換を使用しているため、やや困難です。 （第2ケース用）の基本的なパターンは次のようになります。

.origin(function() { 
     var t = d3.select(this); 
     return {x: t.attr("x"), y: t.attr("y")}; 
    }) 

jsfiddle hereを更新しました。

Answer 2

group要素にはx/y属性がありません - 問題ありません！ものを作成：

var node = svg.append("g") 
      .attr('x',x_1) 
      .attr('y',y_1) 
      .attr("class","node") 
      .attr("name","Node_A") 
      .attr("transform","translate(" + x_1 + ", " + y_1 +")") 
      .call(drag); 

、ラースから.origin機能が

を仕事とXを更新することを忘れてはいけないだろうとき、yはドラッグ中に、属性：

function dragged() { 

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