title: How to get absolute coordinates of object inside a <g> group?
body: <p>This may be a FAQ, so feel free to point me to another answer.  The topic is difficult to search on.</p>
  
  <p>If I want to use d3.js to get an attribute that's explicitly declared in an SVG object, or that I've explicitly put there using D3, I can easily get the value of the attribute using <code>d3.select</code>.  For example, this prints 300:</p>
  
  <pre><code>...
  &lt;circle id="mycircle" r="10" cx="100" cy="200"&gt;
  ...
  d3.select("#mycircle").attr("cx", 300);
  console.log(d3.select("#mycircle").attr("cx"));
  </code></pre>
  
  <p>What if I don't explicit set the value of the attribute, but it is implicitly "set" from a <code>&lt;g&gt;</code> group?  Or: How can I use code to find out where a <code>&lt;g&gt;</code> group is centered?  I'd like some way of determining where in the absolute coordinate system of the <code>&lt;svg&gt;</code> object the things inside the <code>&lt;g&gt;</code> are.  If I knew where the <code>&lt;g&gt;</code> was, how it's oriented in space, etc., I could figure out where points inside it are.  How can I do that?</p>
  
  <p>BigBadaboom remarks in a comment on an answer to <a href="https://stackoverflow.com/questions/26001232/placement-of-svg-circle-that-lacks-center-coordinates/26001719#26001719">this question</a> that what is inherited is not a pair of coordinates, but a <code>transform</code> attribute.  So I can select a <code>&lt;g&gt;</code> and get the value of the transform attribute:</p>
  
  <pre><code>console.log(d3.select("#mygroup").attr("transform"));
  </code></pre>
  
  <p>which prints, for example:</p>
  
  <p>"rotate(-125.93)translate(0,-25)"</p>
  
  <p>Do I have to parse that to find out where the <code>&lt;g&gt;</code> is situated in the absolute coordinate system?</p>