Wie setze ich den Ursprung (drag.origin) für das Ziehen-Verhalten in d3 JavaScript-Bibliothek

Question

Ich versuche, das Ziehen Verhalten für Gruppe bestehend aus HTML-Text und Hintergrund-Rechteck mit dem d3-Framework zu implementieren. Ich war in der Lage, es zu funktionieren, obwohl, wenn ich die Drag.origin nicht setze, kann ich bemerkenswerten Sprung wegen des Offset der Mausposition/Elementkoordinaten sehen. Genau wie auf der d3 wiki-page beschrieben Obwohl die Seite beschrieben, wie Sie den Ursprung zum Ziehen festlegen, verstehe ich nicht richtig, wie es in meinem Beispiel implementieren. Ich habe zwei verschiedene Ansätze ausprobiert: Verwenden des Elements zum Gruppieren der Elemente und Definieren eines neuen Elementhaltepunktes. Im ersten Fall muss ich die translate-Funktion verwenden und ich weiß nicht einmal, wie ich die Koordinaten der Gruppe ermitteln soll.

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

ich eine Erklärung sehr schätzen würde, natürlich vorbereitet ich ein funktionierendes Beispiel hier: http://jsfiddle.net/Y8y7V/

Answer 1

Sie einfach entsprechend die origin() Funktion festlegen müssen. Im zweiten Fall ist das einfach, im ersten Fall etwas schwieriger, weil Sie sowohl Koordinaten als auch eine Transformation verwenden. Das Grundmuster (für den zweiten Fall) sieht wie folgt aus:

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

Aktualisiert jsfiddle here.

Answer 2

Gruppenelement hat keine x/y-Attribute - kein Problem! erstellen diejenigen:

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

wenn, wird die .origin Funktion von Lars

arbeiten

und vergessen Sie nicht, x zu aktualisieren, Attribute y, während des Ziehens:

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