これが非常に単純である場合はお詫びします。解決策を探してみました。
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 の作成) に関するもので、座標系を利用したいというものでした。したがって、2 人の回答者が述べているように、これは基本的な三角関数の問題ですが、それは実際の問題ではありません。
結局のところ、答えは、d3 は私が求めていたことを実行しないということです。しかし、それは簡単に解決策を実行できます。私のように、d3 の実装に苦労していて、それがデータ視覚化への非常にユニークな (そして非常に強力な) アプローチであることを理解している場合は、これらのリンクが役立つかもしれません。d3 Google Groupの皆さんに感謝します。
役に立つ貢献者:
Ian Johnson: まず、ある点から別の点に線を引く方法を知りたいと思います。それがあなたが望む最終結果であり、任意の行に対してそれを行うことができない場合、あなたが望む行に対してそれを行うことはできません. そこから始めましょう: http://tributary.io/inlet/4229462/ 2番目の部分は、描画したい円上の点を計算しています。ただし、その前に、そのポイントがどこにあるかを簡単に確認できるように設定する必要があります。では、円全体を描いてから、使用できる点を描きましょう: http://tributary.io/inlet/4229477/ 次に、trig を使用して入力半径に基づいて、円のある点にその点を配置してみましょう: 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