D3 transformieren Maßstab und übersetzen

Question

Ich versuchte zu verstehen, wie die Transformation in D3 funktioniert, aber ich denke, ich habe es nicht verstanden.

Ändert die Skalierung die Größe des SVG-Objekts? wenn ich eine große Zahl gebe, wird die Größe des Objekts größer aussehen? Verschiebt das Translation-Objekt das Objekt von einem Ort zu einem anderen? Ich habe es versucht, aber es hat nicht funktioniert, wie ich dachte.

Könnten Sie mir bitte erklären, wie es funktionieren soll?

Answer 1

Die Transformationen sind SVG-Transformationen (für Details, werfen Sie einen Blick auf die standard). Im Grunde nehmen scale und translate die entsprechenden Transformationen auf das Koordinatensystem an, was in den meisten Fällen wie erwartet funktionieren sollte. Sie können jedoch mehr als eine Transformation anwenden (z. B. zuerst skalieren und dann übersetzen), und dann ist das Ergebnis möglicherweise nicht das, was Sie erwarten.

Wenn Sie mit den Transformationen arbeiten, denken Sie daran, dass sie das Koordinatensystem transformieren. Im Prinzip ist das, was Sie sagen, wahr - wenn Sie eine Skalierung> 1 auf ein Objekt anwenden, wird es größer aussehen und eine Verschiebung wird es in eine andere Position relativ zu den anderen Objekten verschieben.

Answer 2

Ich weiß, diese Frage ziemlich alt, aber wollte eine kurze Demo von Gruppe teilen verwandelt, Wege/Formen und relative Positionierung, für alle anderen, die ihren Weg hierher gefunden für weitere Informationen suchen:

http://bl.ocks.org/dustinlarimer/6050773

Answer 3

Scott Murray has a great explanation. Zum Beispiel für den Code-Schnipsel:

svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(" + x + "," + y + ")") 
    .call(xAxis); 

erklärt er folgendes mit:

Bitte beachte, dass wir attr() verwenden, um gelten als Attribut g zu verwandeln. SVG Transformationen sind sehr mächtig und können mehrere verschiedene Arten von Transformationsdefinitionen akzeptieren, einschließlich Skalen und Rotationen. Aber wir sind halten es einfach hier mit nur einer Übersetzung transform, die einfach schiebt die ganze g-Gruppe über und unter um ein gewisses Maß.

Translation Transformationen werden mit der einfachen Syntax übersetzen (x, y) angegeben, wobei x und y sind, offensichtlich, die Anzahl der horizontalen und vertikalen Pixel durch die das Element zu übersetzen.