How to get SVG child element position relative to SVG position on page, D3.js?

Question

I have a circle pin on a SVG map. Where the SVG is inside a div "location-map" with overflow:hidden. The SVG dimension is larger than the div dimension.

<div class="location-map">
    <svg></svg>
</div>

svg.selectAll(".pin")
    .data(places)
    .enter().append("circle", ".pin")
    .attr("r", 5)
    .attr("fill", "#fff")
    .attr("transform", function(d) {
        return "translate(" + projection([
            d.location.longitude,
            d.location.latitude
            ]) + ")";
});

I would like to get the circle pin position on SVG so that I can reposition the SVG within the div with negative margin to make the circle pin display horizontally and vertically center on the div.

How do I get the x, y position of the circle pin?

Answer 1

SVGCircle has cx and cy attributes, standing for centerX and centerY.
d3's .attr() method also allows to get those.

 var circle = d3.selectAll(".pin"); var x = circle.attr('cx'); var y = circle.attr('cy'); snippet.log('x: '+x); snippet.log('y: '+y) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> <div class="location-map"> <svg> <circle class="pin" cx="50" cy="50" r="25"/> </svg> </div>