Finding the Center of an Arc Path

[ohyadotatodayho]

Is there a way to find the center of an arc path?

Specifically, I want to find the "center" of an arc for a donut
chart. I imagine the center of an arc path to be at the middle of the
arc length, and radially (outer_radius - inner_radius)/2.

Is there a convenient way to calculate this for each arc path for a
donut?

Thanks!

[Mike Bostock]

Perhaps arc.centroid?

https://github.com/mbostock/d3/wiki/SVG-Shapes#arc_centroid

Mike

[ohyadotatodayho]

Oh yes, that's what I was looking for. Haha oops. Thanks!

[Master Bold]

Hello!

On the same track:

How do you set the center of an arc? 

I see that arc.centroid() gives me the center....

But how do I position it there?

I would like to position different arcs at different positions....

Thanks!

[Master Bold]

I would also want to add that I do not need to bind the arcs to any data.

I just have the positions at which I want them to appear.

Basically there is an object that has arcs before and after him.

Is there no simple way to add arcs at a certain position?

I tried to use the centroid but it always appears in the corner.

Thanks!

[sspboyd]

Bold, 

Have a look at the centroid documentation. I believe setting the transform attribute to the position you want your arc centred is the way to go about it.

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

[Master Bold]

Hi,

Thanks for your intervention sspboyd.

Your example needs to use the transform to position the text close to the arc.

So if you get the position of the centroid everything works fine.

In my case I just want to position different arcs in different places on the screen.

Let's say [100,300], [100,450], [100, 600].

Meaning: The first arc will be between [100.300] and [100,450], the second arc will be

between [100,450] and [100,600]. As you can notice they are all cover half of a circle.

As far as I've seen the arcs only have: startAngle, endAngle,innerRadius, outerRadius

and centroid. Where do I set the x,y attributes from which I start to draw?

Thanks!

[Master Bold]

Hello,

Yep. You were right sspboyd. It also works for the arc itselft :).

I my case I needed to add the transform to the svg:path.

Thanks!

[Master Bold]

Hi everybody,

I made almost everything. There would be just a small problem now.

diff = b.getX - a.getX

var arc = d3.svg.arc()

.startAngle(a.getX)

.endAngle(a.getX + diff)

.innerRadius(diff/2 - 10)

.outerRadius(diff/2 - 20)

var g = vis.selectAll("g")

.data(arcData)

.enter().append("svg:g");

g.insert("svg:path")

.style("fill", colorSentiment)

.attr("d", arc)

       .attr("transform", "translate(" + b.getX + "," + bottomLine + ")");

This displays a donut betweem A and B, as most of you already figured it out, but how do I make just the arc?

I mean half of a donut. The upper or lower half of the donut? Is that done also with an arc?

In https://groups.google.com/forum/?pli=1#!searchin/d3-js/arc$20diagram/d3-js/voeP8pWV0SY/DsCDl-RcWYEJ

Mike says:

"This could be done using the d3.svg.arc"

What am I missing?

Thanks!