我目前正在使用 d3 的打包 cicle 布局( this ),并注意到当父级只有一个子级时,子级的半径与父级相同。
是否可以使用布局提供的 .radius 方法来修改它?理想情况下,如果 parent 只有一个 child ,则 child 的半径应为 parent 的 1/2。
我找到了部分解决方案,即将占位符节点添加到树中,然后运行布局,然后再次删除它们。但这并不是我想要的,因为它使布局看起来偏向一边。
希望这是有道理的。看看 fiddle 就明白我的意思了:jsfiddle
下面发布的示例应显示两个圆圈(如图片中的圆圈 2 所示)。
var root = {
"name": "controls",
"children": [
{"name": "AnchorControl", "size": 2138}
]
};
谢谢
最佳答案
我尝试了一下并设法解决了这个问题。可能不是最佳的,但是嘿,它有效。 =)
this.calculateLayout = function( dim, tree ) {
var packlayout = d3.layout.pack()
.size( [dim, dim] )
.padding( 80 )
.sort( d3.descending )
.value( function( d ) { return 150 } );
addPlaceholders(tree);
var nodes = packlayout( tree );
removePlaceholders(nodes);
centerNodes( nodes );
makePositionsRelativeToZero( nodes );
return nodes;
};
function addPlaceholders( node ) {
if(node.children) {
for( var i = 0; i < node.children.length; i++ ) {
var child = node.children[i];
addPlaceholders( child );
}
if(node.children.length === 1) {
node.children.push({ name:'placeholder', children: [ { name:'placeholder', children:[] }] });
}
}
};
function removePlaceholders( nodes ) {
for( var i = nodes.length - 1; i >= 0; i-- ) {
var node = nodes[i];
if( node.name === 'placeholder' ) {
nodes.splice(i,1);
} else {
if( node.children ) {
removePlaceholders( node.children );
}
}
}
};
function centerNodes( nodes ) {
for( var i = 0; i < nodes.length; i ++ ) {
var node = nodes[i];
if( node.children ) {
if( node.children.length === 1) {
var offset = node.x - node.children[0].x;
node.children[0].x += offset;
reposition(node.children[0],offset);
}
}
}
function reposition( node, offset ) {
if(node.children) {
for( var i = 0; i < node.children.length; i++ ) {
node.children[i].x += offset;
reposition( node.children[i], offset );
}
}
};
};
function makePositionsRelativeToZero( nodes ) {
//use this to have vis centered at 0,0,0 (easier for positioning)
var offsetX = nodes[0].x;
var offsetY = nodes[0].y;
for( var i = 0; i < nodes.length; i ++ ) {
var node = nodes[i];
node.x -= offsetX;
node.y -= offsetY;
}
};
关于javascript - D3.js 压缩圆布局 - 如何调整子半径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22307486/