将点放在弧形中

Question

我有一个圆弧,目前属于该弧的圆点使用d3.layout.pack()来放置它们,但这只是将圆弧中的圆点明显地放在一个圆圈中.

有没有办法让我可以将圆点放在圆弧中以使用圆弧的整个空间(目前它只是将圆弧中心的点聚集成一个圆圈)

我试着搞乱填充,但显然它不是我需要的,因为它可以将圆点推出弧线的边界

谢谢马克

编辑 - 代码 代码只是标准的布局包代码.我试图看看是否有一种方法可以将圆点中的点"打包".

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

然后处理这些点并使用包

dots2 = new Array();
for (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;
}));

顶部图像是它当前的功能,底部是我希望它如何运作.正如你在大弧中所看到的那样,它看起来很奇怪,它不能使用所有的弧线,但我失去了如何实现这一点(我尝试填充包但但它超出了弧的边界).

干杯

Answer 1

实现它的一种方法是通过线性转换d3.layout.pack默认情况下绘制气泡的1x1方块,如下所示:

这些的关键功能是:

// 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);
}

代码的工作演示在这里:http://jsfiddle.net/tq4rjs7v/