Макет упакованного круга D3.js - как настроить дочерний радиус

В настоящее время я использую макет упакованного цикла d3 (это) и заметил, что когда родитель имеет только один ребенок, радиус ребенка такой же, как у родителей.

Можно ли изменить это, используя метод .radius, который предоставляет макет? В идеале, если у родителя есть только один ребенок, радиус ребенка должен составлять 1/2 от родителей.

я нашел частичное решение, которое состоит в том, чтобы добавить узлы-заполнители в дерево, затем запустить макет, а затем снова удалить их. Но это не совсем то, что я хочу, так как макет выглядит односторонним.

Надеюсь, это имеет смысл. взгляните на скрипку, чтобы понять, что я имею в виду: jsfiddle

В приведенном ниже образце должны быть показаны два круга (как в круге 2 на изображении).

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

введите здесь описание изображения

Спасибо


javascript d3.js circle-pack
person Ivan Bacher    schedule 10.03.2014    source источник
comment
Нет способа сделать это с макетом пакета. Его цель состоит в том, чтобы как можно плотнее упаковать круги вместе.   -  person Lars Kotthoff    schedule 10.03.2014
comment
bl.ocks.org/vicapow/3d24f96c240eeb8d14e3   -  person Ivan Bacher    schedule 14.06.2016

Ответы (2)


arrow_upward
2
arrow_downward

Я взял удар и сумел решить проблему. Может быть не оптимально, но, эй, это работает. знак равно

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;
    }
};
person Ivan Bacher    schedule 10.03.2014

arrow_upward
0
arrow_downward

Я не смотрел версию 3 D3, но в версии 4 есть пакет .padding(), в котором вы можете указать количество отступов, которые нужно включить.

См. пример изображения, кружок справа — одиночный дочерний элемент.

введите здесь описание изображения

person Bae    schedule 16.08.2016