2

サークル パック レイアウトで円の半径を微調整することに興味があります。そのためには、元の半径がどのように計算されるかを知る必要があります。

パック レイアウトの d3.js ソース コードを読むと、デフォルトの半径関数は ノードごとに単純Math.sqrtなようです。valueしかし、実際にはそうではありません。これは、 D3.js の元のサークル パックの例 に を追加して変更したためです。bl.ocks.org/ecerulm/f0a36710e3.radius(function(d){return Math.sqrt(d);}) でわかるように、円の半径は同じではありません。

4

1 に答える 1

2

機能として使用d3.layout.pack()します。ただし、明示的に設定されていない場合は、円パック チャート全体が収まるようにスケール変換を適用します。そのため、独自の関数を適用する場合 (その であっても )、暗黙的な半径と同じ結果を得たい場合は、後で独自のスケーリングを適用する必要があります。Math.sqrtradiuspack.nodesd3_layout_packTransform(node, x, y, k)radius radius(Math.sqrt)

Math.sqrt以下の例では、半径関数として明示的に設定し、アクセスできないため、後で[diameter,diameter]独自の関数に合わせてスケーリングします。pack_transformd3_layout_packTranform

var pack = d3.layout.pack()
  .value(function(d) { return d.size; })
  .radius(Math.sqrt)
  .size([diameter - 4, diameter - 4]);

var packnodes = pack.nodes(root);
var packroot = packnodes[0];
var w = diameter, h = diameter;
function pack_transform(node, k) {
    function inner_transform(node,cx,cy,k) { 
      var children = node.children;
      node.x = cx + k * (node.x-cx);
      node.y = cy + k * ( node.y-cy);
      node.r *= k;
      if (children) {
        var i = -1, n = children.length;
        while (++i < n) inner_transform(children[i],cx,cy,  k);
      }
    }
    return inner_transform(node,node.x,node.y,k);
}
pack_transform(packroot,  1 / Math.max(2 * packroot.r / w, 2 * packroot.r / h));
于 2014-05-19T04:30:50.637 に答える