StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCombining translate and rotate with D3
text
Body
copied!<p>Quite possibly this repeats some of <a href="https://stackoverflow.com/questions/12494447/can-d3s-transition-and-rotation-play-well-together">this SO question</a>, but the code is overly-complicated and the OP hasn't added solution code. And this <a href="https://stackoverflow.com/questions/13349925/d3-transition-rotation-and-translation">related question</a> is no longer replicable.</p> <p>I'm trying to figure out how to combine rotations and translations in the right order. It's possible to rotate around the origin <a href="http://jsfiddle.net/geotheory/vRc6T/" rel="nofollow noreferrer">as in this example</a>. But when we follow this with a translation the original rotation <a href="http://jsfiddle.net/geotheory/vRc6T/1/" rel="nofollow noreferrer">is undone</a>. </p> <p>Is it possible to structure this for correct sequential application?</p> <p><strong>jsfidle code:</strong></p> <p>HTML:</p> <pre><code><script src="http://d3.geotheory.co.uk/d3-transform.js"></script> </code></pre> <p>SVG:</p> <pre><code>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); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload