33

さまざまなサイズの円を、 にバンドルされている円形のコンテナに梱包するのではなく、長方形のコンテナに梱包しようとしていました。d3.jsd3.layout.pack

ここに私が達成したいレイアウトがあります:

この問題に関するこの論文を見つけましたが、私はこの記事を完全に理解してコードに変換する数学の専門家ではありません…</p>

これを d3.js レイアウト プラグインに変換し始める場所を誰でも提案できます。または、このレイアウトに似たバブルを視覚化した場合は、それを解決するために取った方向を提案してください。

ありがとうございました。

4

5 に答える 5

1

長方形内の異なるサイズの円の密集を見つけることが主な関心事である場合、残念ながら、新しいd3レイアウトを実装する必要があります。これを行うプラグインが既に作成されていることを知りません。

ただし、探しているのが長方形への古いパッキングである場合は、d3 が提供する既存の円パッキング アルゴリズムを使用できますd3.layout.pack。このレイアウトの境界を指定すると、長方形の寸法が指定されます。次に d3 は、外接する四角形が外接する円を決定し、その円を使用して階層データのルートを視覚化します。したがって、実際にはレンダリングしない「ダミー」ルート ノードを提供し、視覚化する実際のデータをそのノードの子にすることができます。

以下にコード例を示します。また、bl.ocks.orgにも掲載したので、実際の動作を確認できます。 

var w = 640,
    h = 480;

var data = {
  name : "root",
  children : [
    { name: '1', size: 100 }, { name: '2', size: 85 },
    { name: '3', size: 70 } , { name: '4', size: 55 },
    { name: '5', size: 40 } , { name: '6', size: 25 },
    { name: '7', size: 10 } ,
  ]
}

var canvas = d3.select("#canvas")
  .append("svg:svg")
  .attr('width', w)
  .attr('height', h);

var nodes = d3.layout.pack()
  .value(function(d) { return d.size; })
  .size([w, h])
  .nodes(data);

// Get rid of root node
nodes.shift();

canvas.selectAll('circles')
    .data(nodes)
  .enter().append('svg:circle')
    .attr('cx', function(d) { return d.x; })
    .attr('cy', function(d) { return d.y; })
    .attr('r', function(d) { return d.r; })
    .attr('fill', 'white')
    .attr('stroke', 'grey');
于 2012-11-21T20:02:19.347 に答える