StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PODrawing a radius in D3
text
Body
copied!<p>Apologies if this is painfully simple, I have tried searching for a solution. </p> <p>In D3, I can perform an arc by defining this:</p> <pre><code>var ringBannerCcwArc = d3.svg.arc() .innerRadius(420) .outerRadius(470) .startAngle(0) .endAngle(function(t) {return t * -1 * 2 * Math.PI / 6; }); </code></pre> <p>and then defining it in the DOM here:</p> <pre><code>labels.append("path") .attr("id", "ring-banner"); </code></pre> <p>And then at the appropriate time I can do:</p> <pre><code>labels.transition.select("#ring-banner").style("fill", "red") .attrTween("d", function() { return ringBannerCcwArc }); </code></pre> <p>And that will produce a red coloured arcing "label" starting at 0 and stopping at whatever</p> <pre><code>t * -1 * 2 * Math.PI / 6 </code></pre> <p>produces as an angle (yes, 60 degress, but I intend for it to be a variable result). </p> <p><strong>What I would like</strong> 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). </p> <p>Something like this image: <img src="https://i.stack.imgur.com/fJV6f.png" alt="img showing my d3 goal"></p> <p><strong>My goal</strong> 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? </p> <p>Something like this image: <img src="https://i.stack.imgur.com/MnVbl.png" alt="enter image description here"></p> <p>Again, I apologize if this seems obvious. Thanks for any help. </p> <p><strong>EDIT:</strong> 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. </p> <p>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 <a href="https://groups.google.com/forum/?fromgroups=#!forum/d3-js" rel="nofollow noreferrer">d3 Google Group</a>.</p> <p>Helpful contributors:</p> <p><strong>Ian Johnson:</strong> 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: <a href="http://tributary.io/inlet/4229462/" rel="nofollow noreferrer">http://tributary.io/inlet/4229462/</a> 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: <a href="http://tributary.io/inlet/4229477/" rel="nofollow noreferrer">http://tributary.io/inlet/4229477/</a> Now lets try to place that point at some point on the circle based on an input radius using trig: <a href="http://tributary.io/inlet/4229496/" rel="nofollow noreferrer">http://tributary.io/inlet/4229496/</a> once we can control that point, we come full circle ;) and move the line <a href="http://tributary.io/inlet/4229500/" rel="nofollow noreferrer">http://tributary.io/inlet/4229500/</a></p> <p><strong>Chris Viau:</strong> Wrapped it up in a nice helper function: <a href="http://jsfiddle.net/christopheviau/YPAYz/" rel="nofollow noreferrer">http://jsfiddle.net/christopheviau/YPAYz/</a> Suggested a great book for beginners written by Scott Murray: <a href="http://ofps.oreilly.com/titles/9781449339739/index.html" rel="nofollow noreferrer">http://ofps.oreilly.com/titles/9781449339739/index.html</a></p> <p><strong>Scott Murray:</strong> 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: <a href="http://vis.stanford.edu/files/2011-D3-InfoVis.pdf" rel="nofollow noreferrer">http://vis.stanford.edu/files/2011-D3-InfoVis.pdf</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload