在D3中绘制半径

4

如果这个问题太简单,请见谅,我已经尝试搜索解决方案。

在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”(这样我就可以构建一个动态驱动的显示器)。

像这张图片一样:

img showing my d3 goal

我的目标是动态地将数据附加到此并将其应用于D3的惊人功能。因此,一旦我了解如何绘制上述解决方案,我就想知道最终线条的坐标(x2,y2)。线本身可以是固定长度(比如50),但是我如何确定它的位置,以便我可以将最终区域附加到它上面?

像这张图片一样:

enter image description here

如果这看起来很明显,我再次道歉。感谢任何帮助。

编辑: 原始问题涉及我的使用D3 - 创建ringBannerArc - 然后想要利用坐标系统。所以,正如两位回答者所说,这是一个基本的三角问题,但这并不是真正的问题。

最终的答案是d3不能做我所问的。但它可以轻松执行解决方案。如果像我一样,你正在努力实现d3并理解它非常独特(而且非常强大)的数据可视化方法,那么你可能会发现这些链接有用。感谢在d3 Google Group上的人们提供帮助。

有用的贡献者:

Ian Johnson: 首先,你需要知道如何从一个点画一条线到另一个点。这是你想要的最终结果,如果你无法对任意直线执行此操作,则无法对所需直线执行此操作。因此,让我们从那里开始: http://tributary.io/inlet/4229462/ 第二部分是计算你想要绘制的圆上的点。但在此之前,您应该设置好环境,以便可以轻松验证该点的位置。因此,让我们绘制整个圆,然后绘制一个我们可以使用的点: http://tributary.io/inlet/4229477/ 现在让我们尝试根据输入半径将该点放置在圆上的某个点上,使用三角函数: 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

2个回答

2

这其实是一个基本的三角函数问题。

对于一个圆来说,如果角度从垂直方向开始顺时针旋转,并且你的坐标是普通屏幕坐标,

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

根据这些数据,您可以轻松计算出其中任意一条直线。


你可以使用d3.line,例如,使用上述公式设置x和y。或者,您可以使用SVG路径元素计算上述公式的坐标。D3非常灵活,因为您不受其基元的限制。 - tjltjl
谢谢。我正在尝试使用线路路径生成器进行实验。但是,虽然您发布的公式可以发现您可以从中绘制一条线的“点”,但如何保持半径的角度(即“endAngle”)?我在想是否有更简单的方法来利用已经计算出的公式。 - Ricalsin
你可以事先计算出这些值并将它们存储在d3数据中,然后从那里使用。 - tjltjl

1

首先,您需要知道如何从一个点到另一个点画一条线。这是您想要的最终结果,如果您无法为任意线条执行此操作,则无法为所需的线条执行此操作。

第二部分是计算您想要绘制的圆上的点。但在此之前,您应该设置好一些东西,以便可以轻松验证该点的位置。因此,让我们绘制整个圆,并绘制一个我们可以使用的点: http://tributary.io/inlet/4229477/

现在,让我们尝试使用三角函数将该点放置在基于输入半径的圆上某个点,一旦我们可以控制该点,我们就完成了循环 ;) 并移动该线 http://tributary.io/inlet/4229500/


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接