Łączenie tłumaczeń i obracanie za pomocą D3
Całkiem możliwe, że powtarza to częśćto pytanie TAK, ale kod jest zbyt skomplikowany i OP nie dodał kodu rozwiązania. I topowiązane pytanie nie jest już replikowany.
Próbuję dowiedzieć się, jak łączyć rotacje i tłumaczenia we właściwej kolejności. Możliwe jest obracanie wokół początkujak w tym przykładzie. Ale kiedy podążamy za tym tłumaczeniem, oryginalna rotacjajest cofnięty.
Czy można to ustrukturyzować w celu poprawnego zastosowania sekwencyjnego?
kod jsfidle:
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);