2015-02-07 210 views
0

我正在尝试使用D3.js围绕圆圈绘制矩形(想象围绕桌子绘制椅子)。D3.js围绕一个圆圈绘制矩形

我已经尝试通过设置它的x和y位置然后旋转它来单独绘制每个椅子,但我没有太多运气。

我想这可能是一个好办法:

group = container.append("g") 
table = group.append("circle"). 
    attr("cx", 100). 
    attr("cy", 100). 
    attr("r", 60). 
    attr("fill", "#FFF"). 
    attr("stroke", "#b8b8b8"). 
    attr("stroke-width", "2") 
group 
    .append("rect") 
    .attr("x", 90) 
    .attr("y", 10) 
    .attr("width", 20) 
    .attr("height", 20) 
group.attr("transform", "rotate(30, 100, 100)") 

但我无法弄清楚如何使一个转型,重新绘制,然后再拍改造。有任何想法吗?

回答

1

我最终建立在使用旋转的想法上。然后,我只需要对我的几何图形进行一些修改。

首先,我在圆上找到一个点。给你知道的中心x和中心-γ(CXCY)的圆的,方程寻找圆上的点,是:

X = CX +(- [R * SIN(一个))

Y = CX +(- [R * COS(一个))

其中r是半径并且a是以弧度表示的圆上的角度。

然后,我绘制了每个矩形的点(0,0)并将它们围绕圆的中心旋转。

这里是我的解决方案是什么结束了看起来像:

radians = (Math.PI * 0)/180.0 
x = 100 + (70 * Math.sin(radians)) 
y = 100 + (70 * Math.cos(radians)) 

for i in [0..360] by 30 
container 
    .append("rect") 
    .attr("x", x - 10) 
    .attr("y", y) 
    .attr("width", 20) 
    .attr("height", 20) 
    .attr("transform", "rotate(#{i}, 100, 100)") 

注:从X账户减去10为矩形的宽度。