× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS
Utkarsh Upadhyay
Apr 16, 2015
<p>One way you can achieve it is by linearly transforming the 1x1 square in which <code>d3.layout.pack</code> draws the bubbles by default, as shown here:</p> <p><img src="http://i.stack.imgur.com/VrwGZ.png" alt="Transformation of the coordinate system to map a square to an arc segment"></p> <p>The key functions which do that are these:</p> <pre><code>// Does the transformation from [(0,0), (0,1), (1,1), (1,0)] sqaure to an arc // with the parameters [ (r0, theta0), (r0, theta1), (r1, theta1), (r1, theta0) ] function transform_x(xy, r0, r1, theta0, theta1) { var x = xy.x, y = xy.y; return ((1 - x) * r0 + x * r1) * Math.sin((1 - y) * theta0 + y * theta1); } function transform_y(xy, r0, r1, theta0, theta1) { var x = xy.x, y = xy.y; return ((1 - x) * r0 + x * r1) * Math.cos((1 - y) * theta0 + y * theta1); } </code></pre> <p>A working demo of the code is here: <a href="http://jsfiddle.net/tq4rjs7v/">http://jsfiddle.net/tq4rjs7v/</a></p> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/25361011/Placing%20dots%20in%20an%20arc/25958059">Stack Overflow</a>.</p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus