在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");

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

在D3，我可以通过定义这个执行弧

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

而且这将产生一个红色的弧形“标签”从0开始，并停止在任何

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

产生一个角度（是的，60 degress，但我打算它是一个可变的结果）。

我想要做的只是创建一条从“横幅”的半径向外扩展的线（以便我可以构建动态驱动的显示）。

事情是这样的形象： img showing my d3 goal

我的目标是动态数据附加到这一点，并使用D3的amazingness它。所以一旦我了解了如何绘制上述解决方案，我想知道结束坐标（x2，y2）。线路本身可以是一个固定的长度（比如说50），但是我怎样才能确定它的位置，这样我就可以将最后的区域附加到它上面？

事情是这样的形象： enter image description here

我再次道歉，如果这似乎是显而易见的。谢谢你的帮助。

编辑： 最初的问题是关于我使用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/建议由斯科特·默里书面初学者一个伟大的书：http://ofps.oreilly.com/titles/9781449339739/index.html

斯科特·穆雷：使一篇精彩的参考文章，由白皮书撰写d3作者 - 对于我们这些喜欢了解螺母和螺栓的人：http://vis.stanford.edu/files/2011-D3-InfoVis.pdf

来源

2012-12-06 Ricalsin

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

对于一个圆圈，如果角度从垂直开始，顺时针走，你的坐标是正常的屏幕坐标，

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

从这些，你就可以计算任意行简单。

来源

2012-12-06 19:23:02 tjltjl

是的，但在d3。 – Ricalsin

您可以使用例如d3.line，并使用上面的公式设置x和y。或者你可以使用一个svg路径元素，用上面的公式计算坐标。 D3在你可以做的事情上非常灵活，因为你不受限于它的基元 – tjltjl

谢谢。我正在试验线路发生器。但是，虽然您发布的公式会发现可以绘制线条的“点”，但您将如何保持半径的角度（“endAngle”）？我认为有一种更简单的方法可以利用已经计算出来的公式。 – Ricalsin

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

第二部分是计算要绘制的圆上的点。但在你做这件事之前，你应该设置一些事情，以便你可以轻松地确认这一点。所以让我们画的整体循环，再画一个点，我们可以使用： http://tributary.io/inlet/4229477/

现在让我们尝试基于使用制动，一旦我们能够控制该点的输入半径来放置这一点在一些点上圆，我们走完整圈;）并移动线 http://tributary.io/inlet/4229500/

来源

2012-12-07 00:21:11 enjalot

在D3中绘制半径

回答

相关问题