8

私は D3.js で少し遊んでいますが、ほとんどのことが機能しています。しかし、svg シェイプを円形に配置したいと考えています。ということでデータの違いを色と文字で示します。円や円グラフの描き方はわかるのですが、基本的に同じ大きさの円の円を描きたいです。重複させないでください。順序は関係ありません。各円の x と y を調べるために、どこから始めればよいかわかりません。

4

2 に答える 2

6

これに対する別のアプローチは、D3のtreeレイアウトを使用した、任意のサイズの形状の場合です。http: //jsfiddle.net/nrabinowitz/5CfGG/

treeレイアウト（ドキュメント、例）は、指定された半径と任意の2つのアイテムの中心間の間隔を返す関数に基づいて、各アイテムのx、y配置を計算します。この例では、さまざまなサイズの円を使用したため、それらの間の間隔は半径の関数です。

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

D3treeレイアウトを使用すると、最初の問題が解決され、アイテムが円形に配置されます。@Markusが指摘しているように、2番目の問題は、円の正しい半径を計算する方法です。便宜上、ここでは少し大まかなアプローチを取りました。円の円周をさまざまなアイテムの直径の合計として推定し、その間に特定のパディングを入れてから、円周から半径を計算します。

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

ここでの円周は正確ではありません。これは、円内にあるアイテムが少なくなるほど正確性が低下しますが、この目的には十分に近いです。

于 2012-12-02T20:41:18.097 に答える