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