在D3中绘制半径

Question

道歉，如果这很简单，我试图寻找解决方案。

在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并理解它是非常独特（并且非常强大）的数据可视化方法，那么你可能会发现这些链接很有帮助。感谢那些人在d3 Google Group。

有用的贡献者：

Ian Johnson： 首先，您想知道如何从一个点到另一个点绘制一条线。这是你想要的最终结果，如果你不能为任意线做，你不能为你想要的线做。所以让我们从那里开始 http://tributary.io/inlet/4229462/第二部分是计算要绘制的圆上的点。但在此之前，您应该进行设置，以便轻松验证该点的位置。所以我们绘制整个圆圈，然后绘制一个我们可以使用的点： http://tributary.io/inlet/4229477/现在让我们尝试使用trig基于输入半径将该点放在圆上的某个点上： http://tributary.io/inlet/4229496/一旦我们可以控制这一点，我们就会完整的循环;）并移动一行http://tributary.io/inlet/4229500/

Chris Viau：用一个很好的帮助函数包裹起来：http://jsfiddle.net/christopheviau/YPAYz/建议一本适合初学者的好书，由Scott Murray撰写：http://ofps.oreilly.com/titles/9781449339739/index.html

Scott Murray：对d3作者撰写的白皮书做了精彩的参考 - 对于我们这些喜欢理解这些细节的人：http://vis.stanford.edu/files/2011-D3-InfoVis.pdf

Answer 1

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

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

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

然后，您可以简单地计算任一行。

Answer 2

首先，您想知道如何从一个点到另一个点绘制一条线。这是你想要的最终结果，如果你不能为任意线做，你不能为你想要的线做。

第二部分是计算您想要绘制的圆上的点。但在此之前，您应该进行设置，以便轻松验证该点的位置。所以我们绘制整个圆圈，然后绘制一个我们可以使用的点： http://tributary.io/inlet/4229477/

现在让我们尝试根据使用trig的输入半径将该点放在圆上的某个点上，一旦我们可以控制该点，我们就会完整的圆圈;）并移动该线 http://tributary.io/inlet/4229500/