title: in svg: translate vs position x and y
body: <p>When I want to position simple objects such as <code>rect</code> or <code>line</code> should I use <code>transform</code> attribute or <code>x</code> and <code>y</code> attributes?</p>
  <pre class="lang-js prettyprint-override"><code>// this
  d3.selectAll('rect')
      .attr('x', d =&gt; d)
      .attr('y', 0)
  
  // or this?
  d3.selectAll('rect')
      .attr(&quot;transform&quot;, d =&gt; `translate(${d}, 0)`);
  </code></pre>
  <p>What is the performance difference?</p>