在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中繪製半徑

回答

相關問題