Wie die Herkunft (drag.Herkunft) für drag-Verhalten in JavaScript-Bibliothek d3

Ich versuche zu implementieren, ziehen Sie das Verhalten für die Gruppe, bestehend aus HTML-text und hintergrund-Rechteck mit der d3-framework. Ich war in der Lage, um es arbeiten, obwohl, wenn die Einstellung nicht ziehen.Herkunft kann ich sehen, spürbare Sprung durch die Maus-position/element-Koordinaten-offset. Genau wie beschrieben auf der d3 wiki-Seite
Obwohl die Seite beschrieben, wie die Herkunft ziehen, die ich nicht richtig verstehen, wie ti implementieren es in meinem Beispiel. Ich habe versucht, zwei verschiedene Ansätze : mit dem element für die Gruppierung der Elemente zusammen und definieren neue element holding tose. Im ersten Fall muss ich das mit der übersetzen-Funktion und ich weiß gar nicht, wie man die Koordinaten der Gruppe.

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 würde mich sehr über jede Erklärung, die ich natürlich bereit ein funktionierendes Beispiel hier : http://jsfiddle.net/Y8y7V/

InformationsquelleAutor karlitos | 2013-04-12

22

Müssen Sie einfach legen Sie die origin() Funktion entsprechend. Im zweiten Fall ist dies einfach, im ersten Fall etwas schwieriger, da Sie mithilfe der Koordinaten, sowie eine Transformation. Das grundlegende Muster (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 hier.

Ich danke Ihnen sehr für Ihre Erklärung. Im ersten Fall kann ich fügen Sie einfach die x/y-Koordinaten als parameter der <g> - element. Ich Frage mich, wie kann ich die übersetzung der parameter gemäß der angegebenen x/y-Parameter, wie : var group = svg.append("svg:g") .attr("x", 50) .attr("y", 25) .attr("transform", "translate (" + [.attr("x"),diese.attr("y") ] + ")") Diese von ocourse nicht funktionieren, weil this auf das window-Objekt.
Wenn Sie die origin() entsprechend, die Sie nicht benötigen, um die Transformation auf der Grundlage der statischen Koordinaten.
Das löst nicht mein problem - Frage, für die ich war nicht in der Lage zu finden, die Antwort noch - wie man die position der Gruppe, die <g>-element, wenn ich nur die "transformation" an die gewünschte position. Vielen Dank jedenfalls, Ihrer vorherigen Erklärung ist mein problem gelöst und ich war in der Lage, eine funktionierende Lösung für Stand-Fälle.

InformationsquelleAutor Lars Kotthoff

group-element hat keine x - /y-Attribute - kein problem! erstellen:

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, die .Herkunft-Funktion-von Lars arbeiten

und vergessen Sie nicht, aktualisieren Sie die x -, y-Attribute, beim ziehen:

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

InformationsquelleAutor Dimas51

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.