D3.js打包圆布局 - 如何调整孩子半径 [英] D3.js packed circle layout - how to adjust child radius

问题描述

我目前正在使用d3的打包的展板布局（此），并注意到当父项只有一个子项，子项的半径与父项相同。

I am currently useing d3's packed cicle layout(this) and have noticed that when a parent only has one child, the radius of the child is the same as the parents.

是否可以使用布局提供的.radius方法修改此项？理想情况下，如果家长只有一个孩子，孩子的半径应该是父母的半径。

Is it possible to modify this using the the .radius method the layout provides? Ideally if a parent only has one child the child's radius should be 1/2 of the parents.

我发现了一个部分解决方案， ，然后运行布局，然后再次删除它们。但这不是我想要的，因为它使布局看起来侧面。

i found a partial solution, which is to add placeholder nodes to the tree, then run the layout, then remove them again. But this isnt exactly what i want, since it makes the layout look on sided.

希望这是有道理的。看看这个小提琴，看看我的意思： jsfiddle

Hope this makes sense. take a look at the fiddle to see what i mean: jsfiddle

下面贴出的示例应该显示两个圆圈（如img中的圆圈2）。

The below posted sample should show two circles( like in circle 2 in the img).

var root = {
     "name": "controls",
     "children": [
      {"name": "AnchorControl", "size": 2138}
     ]
};

thx

推荐答案

我对它采取了一个刺，并设法解决这个问题。可能不是最佳，但嘿，它的工作。 =）

I took a stab at it and managed to solve the issue. Might not be optimal but hey, it works. =)

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

这篇关于D3.js打包圆布局 - 如何调整孩子半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！