将点放在弧形中

Question

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

有没有办法可以将圆点放在圆弧中以使用圆弧的整个空间（目前它只是将圆弧中心的点聚为圆形）

我尝试弄乱填充物，但显然它不是我需要的东西，因为它可以将圆点推出圆弧的范围

由于 标记

编辑 - 代码 代码只是标准的布局包代码。我试图看看是否有办法可以＆＃34;打包＆＃34;圆弧中的圆点。

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/