Accepted answer

You can use to select parent element of current element. And for selecting root element you can use"#invisibleG").


To get the root element g (as cuckovic points out) can be got using:

circle ="#circle_id"); 
g = { return this.parentNode; })

This will return a d3 object on which you can call functions like:

transform = g.attr("transform");


will just return the SVG element. Below I have tested the different variants.

// Variant 1
circle ="#c1");
g =;"#t1").text("Variant 1: " + g);
// This fails:
//transform = d3.transform(g.attr("transform"));

// Variant 2
circle ="#c1");
g = circle.node().parentNode;"#t2").text("Variant 2: " + g);
// This fails:
//transform = d3.transform(g.attr("transform"));

// Variant 3
circle ="#c1");
g = {
  return this.parentNode;
transform = d3.transform(g.attr("transform"));"#t3").text("Variant 3: " + transform);
<script src=""></script>

  <svg height="200" width="300">
  <circle id="c1" cx="50" cy="50" r="40" fill="green" />
<text id="t1" x="0" y="120"></text>
<text id="t2" x="0" y="140"></text>
<text id="t3" x="0" y="160"></text>


Related Query

More Query from same tag