CODEWITHSUNDEEP
d3.js
Manoj K J
Manoj K J

Reputation: 69

Finding the x and y co-ordinates on circle in d3 pie chart

I need to display a tooltip outside the d3 pie chart outer edge. For that I need to find the x and y co-ordinates on the outer edge.

I was able to bring the tooltip based on the mouse location using d3.event.pageX and d3.event.pageY. But I want to place the tool tip on the center of the outer arc of the pie slice.

Any pointers on how to find the co-ordinates for it will be helpful

Upvotes: 0

Views: 884

Answers (1)

ahmohamed
ahmohamed

Reputation: 2970

From D3.js documentation:

arcs.append("text")
    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function(d) { return d.value; });

Refer to this question for a working fiddle

Upvotes: 0

Related Questions