title: Combining translate and rotate with D3
body: <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="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="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>&lt;script src="http://d3.geotheory.co.uk/d3-transform.js"&gt;&lt;/script&gt;
  </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>