我有兴趣调整圆形包布局上的圆形半径。为此,我需要知道原始半径是如何计算的。
通过阅读包布局的 d3.js 源代码,似乎默认的半径函数仅 适用Math.sqrt
于value
每个节点。但事实并非如此,因为我修改了 D3.js 原始圆包示例, 添加了 a.radius(function(d){return Math.sqrt(d);})
并且您可以在bl.ocks.org/ecerulm/f0a36710e3看到圆的半径不一样。
我有兴趣调整圆形包布局上的圆形半径。为此,我需要知道原始半径是如何计算的。
通过阅读包布局的 d3.js 源代码,似乎默认的半径函数仅 适用Math.sqrt
于value
每个节点。但事实并非如此,因为我修改了 D3.js 原始圆包示例, 添加了 a.radius(function(d){return Math.sqrt(d);})
并且您可以在bl.ocks.org/ecerulm/f0a36710e3看到圆的半径不一样。
作为函数的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
它不可访问:
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));