javascript - Placing dots in an arc -

i have arc , dots belong arc use d3.layout.pack() place them, places dots in arc in circle obviously.

is there way place dots in arc use whole space of arc (currently clusters points in center of arc in circle)

i tried messing padding not needed can push dots out of bounds of arc

thanks mark

edit - code code standard layout pack code. trying see if there way can "pack" dots in arc.

var pack = d3.layout.pack() .sort(null) .size([_config.ringwidth, _config.ringwidth])//config.ringwidth width of arc .value(function (d) {   return 1 * math.random();//the dots same size }); 

the dots processed , pack used

dots2 = new array(); (var clusternum = 0; clusternum < _hierarchy.dots.dotsarray.length; clusternum++) {     dots2[clusternum] = svg.selectall(".node" + clusternum)       .data(pack.nodes(_hierarchy.dots.dotsarray[clusternum])       .filter(function (d) {          return !d.children; })); 

the top image how functions , bottom how want function. can see in large arcs looks strange cannot use arc, lost on how achieve (i tried padding pack goes outside boundaries of arc).

cheers

one way can achieve linearly transforming 1x1 square in d3.layout.pack draws bubbles default, shown here:

the key functions these:

// transformation [(0,0), (0,1), (1,1), (1,0)] sqaure arc // 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); } 

a working demo of code here: http://jsfiddle.net/tq4rjs7v/