Question

I have a chart with some circles on it. When the user hovers over a circle, I want to create a mouseover event and pass the x and y coordinates of the center of that circle. How do I do that?

svg.selectAll("circle") 
      .data(data)
      .enter().append("circle")
      .attr("cx", function(d) { return x(d.number); })
      .attr("cy", function(d) { return y(d.area); })
      .call(d3.my_helper.tooltip(function(d, i){return "Area: "+ d.area;}));

d3.my_helper.tooltip = function(accessor){
            return function(selection){
                var circle_x = ???; // the center of the circle
                var circle_y = ???; // the center of the circle
                selection.on("mouseover", function(d, i){
                    // do stuff here with circle_x and circle_y
                });
            };
        }; 

Answer 1

You will need to find the offset of the svg elem itself and then add the “cy” attribute (center y) to the y coordinate and the “cx” attribute (center x) to the x coordinate accordingly:

$('circle').hover(function (ev) {
    var svgPos = $('svg').offset(),
        x = svgPos.left + $(ev.target).attr('cx'),
        y = svgPos.top + $(ev.target).attr('cy'),
        coords = [x, y];

    // coords now has your coordinates
});

If you are not using jQuery, consider using a usual hover event listener as well as .offsetTop and .offsetLeft on the element.