title: How to apply rotate transformation and don't change the coordinates system in D3.js?
body: <p>I am rendering dynamically multiple rectangles that have rotate applied to them. What I'm trying to achieve is to put diamond like shapes one below another and isolate the transform attribute. Is it possible?</p>
  
  <pre><code>const svg = d3
    .select('#root')
    .append('g')
    .attr('transform', 'translate(200,200)');
  
  svg.selectAll('.device')
    .data([1, 2, 3, 4])
    .enter()
    .append('rect')
    .attr('width', 10)
    .attr('height', 10)
    .attr('x', 0)
    .attr('y', (d, i) =&gt; { return i * 10 * Math.sqrt(2); })
    .attr('transform', 'rotate(45)')
    .attr('fill', '#000');
  </code></pre>
  
  <p><a href="https://jsfiddle.net/m0tftpeo/1/" rel="nofollow noreferrer">Here</a> you can find the <a href="https://jsfiddle.net/m0tftpeo/1/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>Obs. I could resolve this issue by altering the <code>x</code> attribute but I don't want that. </p>
  
  <p>Thank you in advance!</p>