Die Kombination von verschieben und rotieren mit D3

Womöglich wiederholt dies einige diese Frage ALSO, aber der code ist übermäßig kompliziert und die OP hat nicht Hinzugefügt lösungscode. Und diese stellt sich die Frage, ist nicht mehr replizierbar.

Ich versuche, herauszufinden, wie zu kombinieren, Drehungen und übersetzungen in der richtigen Reihenfolge. Es ist möglich, drehen sich um die Herkunft wie in diesem Beispiel. Aber wenn wir Folgen diesem mit einer übersetzung der original-rotation rückgängig gemacht wird.

Ist es möglich, die Struktur dieses für die korrekte sequentielle Anwendung?

jsfidle code:

HTML:

<script src="http://d3.geotheory.co.uk/d3-transform.js"></script>

SVG:

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

//Draw the Rectangle
var rect = svg.append("rect")
    .attr("x", 0).attr("y", 0)
    .attr("width", 50).attr("height", 100)
    .style("fill", "purple");

var rotate = d3.svg.transform().rotate(-45);
var translate = d3.svg.transform().translate(200, 100);

rect.attr('transform', rotate);

var rect2 = rect.attr('transform', rotate);
rect2.attr('transform', translate);

InformationsquelleAutor geotheory | 2013-11-17

  1. 16

    Erstellen Sie zwei verschiedene Transformationen. Zuweisen einer nicht zu den anderen. Das heißt, im tun

    rect2.attr('transform', translate);

    du bist Rückgängigmachen der erste, so ist es überschrieben.

    Beides zu haben, fügen Sie Sie beide zu einem übergang, z.B.

    var rotateTranslate = d3.svg.transform().rotate(-45).translate(200, 100);
rect2.attr('transform', rotateTranslate);

    Dies dynamisch, müssen Sie etwas tun, wie diese.

    .attr("transform", function() {
    return d3.svg.transform()
        .translate(200, 100)
        .rotate(-45)
        .translate(-d3.select(this).attr("width")/2, -d3.select(this).attr("height")/2)();
}

    Komplette jsfiddle hier.

    Cheers. Ich habe versucht Verkettung vor, aber es implementiert übersetzen, bevor drehen. Jetzt erkenne ich, dass d3 die Anwendung in umgekehrter Reihenfolge (von rechts nach Links) - so sollte es eigentlich sein .translate(200, 100).rotate(-45).
    Natürlich ist die Drehung um den Ursprung, so muss es sein, eine weitere operation zu drehen, um Objekt - Schwerpunkt. Allerdings var rotateTranslate = d3.svg.transform().translate(200, 100).rotate(-45).translate(-this.width/2, -this.height/2); ausfällt (Unerwarteter Wert übersetzen(200,100) drehen(-45) übersetzen(NaN,NaN) - parsing-transform-Attributs.) ich denke, weil "diese" bezieht sich nicht richtig auf das Objekt, das wir übersetzen möchten. Was würden Sie empfehlen?
    Sie können diese innerhalb einer Funktion auf ein Attribut wie jedes andere Dinge, z.B. d3.selectAll("..").attr("transform", function() { return d3.svg.transform().translate(200, 100).rotate(-45).translate(-this.width/2, -this.height/2); });
    So, wo mache ich falsch? jsfiddle.net/geotheory/vRc6T/3
    Ok, in die Geige, Sie waren nicht die Auswahl etwas, damit der code nicht ausgeführt, aber mein Beispiel war nicht korrekt. this.width funktioniert nicht, es sei denn, Sie legen Sie die Breite explizit als ein Attribut, und Sie müssen, um die Funktion aufzurufen, die transform gibt. Ich werde aktualisieren, die Antwort.

    InformationsquelleAutor Lars Kotthoff

  2. 9

    Wenn Sie schauen, um dies zu tun in D3 version 4.x+ Sie können es ja gerne machen:

    .attr('transform', 'translate(200,100)rotate(-45)')

    https://bl.ocks.org/mbostock/1345853

    InformationsquelleAutor Henry Zhu

Schreibe einen Kommentar