Question

我有兴趣调整圆组布局上圆圈的半径。为此，我需要知道如何计算原始半径。

通过阅读d3.js source code for pack layout，似乎每个节点的默认半径函数只是Math.sqrt value。但事实并非如此，因为我修改了D3.js original circle pack example添加了.radius(function(d){return Math.sqrt(d);})，正如您在bl.ocks.org/ecerulm/f0a36710e3看到的那样，圆圈的半径也不相同。

Answer 1

d3.layout.pack()使用Math.sqrt作为radius函数。但pack.nodes将应用比例转换d3_layout_packTransform(node, x, y, k)，以便在radius 未明确设置时使整个圆组图表适合。这就是为什么如果你应用自己的函数（即使它是radius(Math.sqrt)），你需要应用自己的缩放，如果你想获得与隐式半径相同的结果。

在下面的示例中，我明确将Math.sqrt设置为半径函数，然后按比例缩放以使[diameter,diameter]适合我自己的函数pack_transform，因为d3_layout_packTranform不可访问：< / p>

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));

圆包的原始半径函数是多少？

1 个答案: