如果这个问题太简单,请见谅,我已经尝试搜索解决方案。
在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](https://istack.dev59.com/fJV6f.webp)
我的目标是动态地将数据附加到此并将其应用于D3的惊人功能。因此,一旦我了解如何绘制上述解决方案,我就想知道最终线条的坐标(x2,y2)。线本身可以是固定长度(比如50),但是我如何确定它的位置,以便我可以将最终区域附加到它上面?
像这张图片一样:
![enter image description here](https://istack.dev59.com/MnVbl.webp)
如果这看起来很明显,我再次道歉。感谢任何帮助。
编辑: 原始问题涉及我的使用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