Drawing a radius in D3

Question

Apologies if this is painfully simple, I have tried searching for a solution.

In D3, I can perform an arc by defining this:

var ringBannerCcwArc = d3.svg.arc()
.innerRadius(420)
.outerRadius(470)
.startAngle(0)
.endAngle(function(t) {return t * -1 * 2 * Math.PI / 6; });

and then defining it in the DOM here:

labels.append("path")
.attr("id", "ring-banner");

And then at the appropriate time I can do:

labels.transition.select("#ring-banner").style("fill", "red")
.attrTween("d", function() { return ringBannerCcwArc });

And that will produce a red coloured arcing "label" starting at 0 and stopping at whatever

t * -1 * 2 * Math.PI / 6

produces as an angle (yes, 60 degress, but I intend for it to be a variable result).

What I would like to do is simply create a line that extends outward from this banner on the radius of the "endAngle" (so that I can build a dynamically driven display).

Something like this image:

My goal is to dynamically attach data to this and employ the amazingness of D3 to it. So once I understand how to draw the above solution, I would then like to know the resulting coordinates of the end line (x2,y2). The line itself can be a set length (say, 50) but how would I determine it's position so that I could attach a final area to it?

Something like this image:

Again, I apologize if this seems obvious. Thanks for any help.

EDIT: The original question was regarding my use of D3 - creating a ringBannerArc - and then wanting to tap into the coordinate system. So, as the two respondents state, it is a basic trig problem but that's not really the question.

In the end, the answer is that d3 does not do what I was asking. But it can easily perform the solution. If, like me, you are struggling with implementing d3 and understanding it's very unique (and extremely powerful) approach to data visualization then you might find these links helpful. Thanks to the guys over at the d3 Google Group.

Helpful contributors:

Ian Johnson: First you want to know how to draw a line from one point to another. That's the end result you want and if you can't do it for arbitrary lines you can't do it for the line you want. so lets start there: http://tributary.io/inlet/4229462/ The second part is calculating the point on the circle you want to draw. But before you do that, you should set things up so you can verify easily where that point is. so lets draw the overall circle, and then draw a point we can use: http://tributary.io/inlet/4229477/ Now lets try to place that point at some point on the circle based on an input radius using trig: http://tributary.io/inlet/4229496/ once we can control that point, we come full circle ;) and move the line http://tributary.io/inlet/4229500/

Chris Viau: Wrapped it up in a nice helper function: http://jsfiddle.net/christopheviau/YPAYz/ Suggested a great book for beginners written by Scott Murray: http://ofps.oreilly.com/titles/9781449339739/index.html

Scott Murray: Makes a wonderful reference to a white paper written by the d3 authors - for those of us who like to understand the nuts and bolts: http://vis.stanford.edu/files/2011-D3-InfoVis.pdf

Answer 1

First you want to know how to draw a line from one point to another. That's the end result you want and if you can't do it for arbitrary lines you can't do it for the line you want.

The second part is calculating the point on the circle you want to draw. But before you do that, you should set things up so you can verify easily where that point is. so lets draw the overall circle, and then draw a point we can use: http://tributary.io/inlet/4229477/

Now lets try to place that point at some point on the circle based on an input radius using trig, once we can control that point, we come full circle ;) and move the line http://tributary.io/inlet/4229500/

Answer 2

This is essentially a basic trigonometry question.

For a circle, if the angles start from vertical and go clockwise, and your coordinates are normal screen coordinates,

x = cx + sin(angle) * r
y = cy + cos(angle) * r

From these, you can then compute either line simply.