Question

我尝试使用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)")

但我无法弄清楚如何进行转换，重绘，然后进行另一次转换。有什么想法吗？

Answer 1

我最终建立在使用旋转的想法上。然后，我只需要在我的几何上刷一点。

首先，我在圆圈上找到了一个点。在您知道圆的中心-x和中心-y（ cx 和 cy ）的情况下，找到圆上的点的等式是：

x = cx +（ r * sin（ a ））

y = cx +（ r * cos（ a ））

其中 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个矩形的宽度。

D3.js围绕圆形绘制矩形

1 个答案: