円内にsvg図形を配置する方法は？

Question

私はD3.jsで少し遊んでいます。ほとんどのものが動作しています。しかし、私は自分のSVGの形を円で描きたい。だから私は色とテキストとのデータの違いを表示します。私は円と円グラフを描く方法を知っていますが、基本的に同じサイズのサークルの円を描きたいと思います。そしてそれらが重なり合わないように、順序は無関係です。私は各円のx &を見つけるために、どこから始めたらいいのかわかりません。

だけで、適切なステップサイズでいくつか角度変数をループして、xとyの値を計算するsin()とcos()を使用します。私が正しくあなたを理解していれば

Answer 1

はD3のtreeレイアウトを使用して、任意のサイズの形状のために、これに別のアプローチでは、次のとおりhttp://jsfiddle.net/nrabinowitz/5CfGG/

treeレイアウト（docs、exampleは）に基づいて、各アイテムのx、yの配置を把握します与えられた半径と任意の2つのアイテムの中心間の分離を返す関数この例では、Iは、様々な大きさの円を使用するので、それらの間の分離は、それらの半径の関数である：

var tree = d3.layout.tree() 
    .size([360, radius]) 
    .separation(function(a, b) { 
     return radiusScale(a.size) + radiusScale(b.size); 
    }); 

D3 treeレイアウトを使用して、円の項目をレイアウトする、最初の問題を解決します。 2番目の問題は、@ Markusのメモのように、円の正しい半径を計算する方法です。私は便宜のためにここでやや荒いアプローチを取った：私は円の円周をさまざまなアイテムの直径の合計と見積もって、その間に所定の詰め物を入れてから、円周から半径を計算する：

var roughCircumference = d3.sum(data.map(radiusScale)) * 2 + 
     padding * (data.length - 1), 
    radius = roughCircumference/(Math.PI * 2); 

ここの円周は正確ではありません。これは円の中にあるアイテムの数が少ないほど正確ではありませんが、この目的には十分です。

Answer 2

が、これはかなり標準的な数学の質問です。

例：

たとえば、3つのオブジェクトを配置しようとしているとします。円には360度があります。したがって、各オブジェクトは、次のオブジェクトから120度離れています。あなたのオブジェクトのサイズが20×20ピクセルである場合は、次の場所に敷いてください：

ここ

x1 = sin( 0 * pi()/180) * r + xc - 10; y1 = cos( 0 * pi()/180) * r + yc - 10 
x2 = sin(120 * pi()/180) * r + xc - 10; y2 = cos(120 * pi()/180) * r + yc - 10 
x3 = sin(240 * pi()/180) * r + xc - 10; y3 = cos(240 * pi()/180) * r + yc - 10 

、rは円の半径であると(xc, yc)は、円の中心点の座標です。 -10'sオブジェクトの円上の中心（左上角ではなく）があることを確認してください。 * pi()/180は度をラジアンに変換します。これは、ほとんどの実装であるsin()とcos()が必要です。

注：これは、円の周りに均等に分布した形を配置します。重複しないようにするには、十分に大きいrを選択する必要があります。オブジェクトにシンプルで同一の境界線がある場合は、それらのうち10個をレイアウトして必要な半径を計算し、20を配置する必要がある場合は半径を2倍、30を30倍大きくします。オブジェクトが不規則な形になっていて、可能な限り小さな円を見つけるために円の周りに最適な順序で配置したい場合、この問題は非常に面倒です。たぶんこれのためのライブラリがありますが、私は頭の上に1つもなく、D3.jsを使用していないので、この機能を提供するかどうかもわかりません。ここ