d3.js - 在 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 上的人.

有用的贡献者:

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

克里斯·维奥:将它封装在一个不错的辅助函数中: http://jsfiddle.net/christopheviau/YPAYz/推荐一本由 Scott Murray 编写的适合初学者的好书: http://ofps.oreilly.com/titles/9781449339739/index.html

斯科特·默里:很好地引用了 d3 作者撰写的白皮书 - 对于我们这些喜欢了解具体细节的人: http://vis.stanford.edu/files/2011-D3-InfoVis.pdf

Answer 1

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

对于一个圆，如果角度从垂直开始顺时针旋转，并且您的坐标是正常的屏幕坐标，

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

从这些中，您可以简单地计算任一行。