D3.js 在D3中绘制半径

道歉如果这很简单，我已经试着寻找解决办法

在D3中，我可以通过定义以下内容来执行圆弧：

var ringBannerCcwArc = d3.svg.arc()
.innerRadius(420)
.outerRadius(470)
.startAngle(0)
.endAngle(function(t) {return t * -1 * 2 * Math.PI / 6; });

然后在DOM中定义它：

labels.append("path")
.attr("id", "ring-banner");

然后在适当的时候我可以做：

labels.transition.select("#ring-banner").style("fill", "red")
.attrTween("d", function() { return ringBannerCcwArc });

这将产生一个红色的电弧“标签”，从0开始，在任何位置停止

t * -1 * 2 * Math.PI / 6

产生一个角度（是的，60度，但我希望它是一个可变的结果）

我想做的就是在“endAngle”的半径上创建一条从横幅向外延伸的线（这样我就可以构建一个动态驱动的显示）

类似于此图像：

我的目标是动态地将数据附加到它，并利用D3的惊人之处。因此，一旦我理解了如何绘制上面的解，我想知道得到的终点线坐标（x2，y2）。线本身可以是一个设定的长度（比如说，50），但我如何确定它的位置，以便我可以附加一个最终区域到它

类似于此图像：

如果这看起来很明显，我再次道歉。谢谢你的帮助

编辑： 最初的问题是关于我使用D3——创建一个ringBannerArc——然后想要进入坐标系。因此，正如两位受访者所说，这是一个基本的三角问题，但这不是真正的问题

最后，答案是d3没有按照我的要求做。但它可以轻松地执行解决方案。如果像我一样，您正在努力实现d3，并且理解它是一种非常独特（而且非常强大）的数据可视化方法，那么您可能会发现这些链接很有帮助。多亏了那边的人

有帮助的贡献者：

伊恩·约翰逊： 首先，你想知道如何从一个点到另一个点画一条线。这就是您想要的最终结果，如果您不能为任意行执行此操作，则无法为您想要的行执行此操作。让我们从这里开始： 第二部分是计算要绘制的圆上的点。但在你这么做之前，你应该设置一些东西，这样你就可以很容易地验证那个点在哪里。让我们画一个整体圆，然后画一个我们可以使用的点： 现在，让我们尝试使用trig根据输入半径将该点放置在圆上的某个点上： 一旦我们能控制住那个点，我们就绕了一圈；）把线移走

克里斯·维奥：将其包装在一个很好的助手函数中：建议Scott Murray为初学者编写一本好书：

---

斯科特·默里：很好地引用了d3作者撰写的白皮书——对于我们这些喜欢了解细节的人来说：

这本质上是一个基本的三角学问题

对于圆，如果角度从垂直方向开始顺时针方向移动，并且坐标为正常屏幕坐标

x = cx + sin(angle) * r
y = cy + cos(angle) * r

---

根据这些，您可以简单地计算任意一条直线。

首先，您想知道如何从一点到另一点绘制直线。这就是您想要的最终结果，如果您不能为任意行执行此操作，则无法为您想要的行执行此操作

第二部分是计算要绘制的圆上的点。但在你这么做之前，你应该设置一些东西，这样你就可以很容易地验证那个点在哪里。让我们画一个整体圆，然后画一个我们可以使用的点：

现在，让我们尝试使用trig根据输入半径将该点放置在圆上的某个点上，一旦我们可以控制该点，我们就可以完成整个圆；）把线移走

---

您可以使用，例如d3.线，并使用上述公式设置x和y。也可以使用svg路径元素，使用上述公式计算坐标。D3在你能做的事情上是非常灵活的，因为你不局限于它的原始手链。我正在试验线路路径生成器。但是，既然你发布的公式会发现你可以从中画一条线的“点”，你如何保持半径的角度（“端角”）？我在想，有一种更简单的方法可以利用已经计算过的公式，你可以事先将它们计算到d3数据中，然后从那里使用它们。