d3 JavaScript kitaplığında sürükleme davranışı için Origin (drag.origin) nasıl ayarlanır

Question

HTML metin ve arka plan dikdörtgeni içeren grup için sürükleme davranışını d3 çerçevesini kullanarak uygulamaya çalışıyorum. Drag.origin ayarlamamış olsa da, fare-pozisyonu/eleman-koordinatları ofsetinden dolayı dikkat çekici bir sıçrama görebildiğim halde çalışmayı başarabiliyordum. Tam olarak d3 wiki-page 'da nasıl açıklandığı sayfa Sürüklenecek Origin'in nasıl ayarlanacağını açıklayan sayfa olmasına rağmen, ti uygulamasının benim örneğimde nasıl uygulandığını tam olarak anlayamıyorum. İki farklı yaklaşımı denedim: öğeleri bir arada gruplamak ve yeni elementi tokmak için tanımlamak. İlk durumda çeviri işlevini kullanmam gerekiyor ve grubun koordinatlarını nasıl bile edeceğimi bile bilmiyorum.

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); 

Çok herhangi bir açıklama takdir ediyorum, doğal olarak burada bir çalışma örneği hazırlanmıştır: http://jsfiddle.net/Y8y7V/

Answer 1

Sadece buna göre origin() işlevini ayarlamanız gerekir. İkinci durumda bu basittir, ilk durumda biraz daha zordur çünkü koordinatları ve dönüşümü kullanıyorsunuz. (Ikinci durum için) temel desen şuna benzer:

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

jsfiddle here güncellendi.

Answer 2

grup öğesinde x/y öznitelikleri yok - sorun yok! yenilerini oluşturmak:

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); 

zaman, Lars gelen .origin fonksiyonu y nitelikleri

çalışacak ve x güncellemek dont unutmak sürüklerken:

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); 
}