Split children in n th rows specific number of children par each row

Question

I am working on tree layout of D3.js. it's simple tree layout but i have more than 8 or 9 childs per each node.

So I need to split childrens in rows if i set 3 child per row than if node have 7 child than there will be 3 rows under node with 3,3,1 child just like in image.

I tried this solution But it's just change x, y positions for two columns only ans also when child have grand-child than node overlap each other.

I am working with depth now..If any one have solution than most welcome

enter image description here

It sounds like you would need a custom layout for this. The tree layout would be a good place to start. — Lars Kotthoff, Aug 02 '14 at 10:34
I already use tree layout and and able to move child in next row but if there is parallel node to parent will go too far in x -axis — Amit Rana, Aug 04 '14 at 12:48
What code have you written? What have you tried? Please do not ask 'questions' that are basically asking people to write up a solution for you. If an existing D3.js layout does not meet your needs, you need to understand D3.js and write JavaScript code to change it. Once you have done this and are stuck, you can ask a question that includes code. — Phrogz, Dec 11 '14 at 16:11
I get the solution by my own _nodesData.forEach(function (d) { d.y = d.depth * 220; // if the node has too many children, go in and fix their positions to two columns. // if (d.children != null || d.children.length > 10) { if (d.children) { d.children.forEach(function (d, i) { d.x = d.parent.x - (d.parent.children.length-1)*200/30 + (d.parent.children.indexOf(d))*200/10 - i % 10 * 100 ; }); } }); — Amit Rana, Jan 03 '15 at 08:55

score 0 · Answer 1 · answered Jan 03 '15 at 09:06

I already solved it but i forget to post answer

here after the tree manage it's own layout if you want to split them by row

  var tree = d3.layout.tree()
        .separation(function(a, b) {
            return a.parent === b.parent ? 1 : 0.8;
        })
        .nodeSize([200,200]);

    var _nodesData = tree.nodes(rootObject);
    // _nodesData.forEach(function(d) { d.y = d.depth * 220;});

    _nodesData.forEach(function (d) {
        d.y = d.depth * 220;



        if (d.children) {
            d.children.forEach(function (d, i) {
                d.x =  d.parent.x - (d.parent.children.length-1)*200/30
                    + (d.parent.children.indexOf(d))*200/10 - i % 10 * 100 ;
            });
        }
    });

here 200 is space between each child and 10 is number of child per each row

and obviously this make your next level child override issue for that you can save last max Y and max X on each level and use for starting point of next level just like next code

var tree1 = d3.layout.tree()
            .separation(function(a, b) {
                return a.parent === b.parent ? 1.5 : 1.5;
            })
            .nodeSize([150,200]);

        var _nodesData1 = tree1.nodes(_newRecordData[_x]);

        _nodesData1.forEach(function (d) {
           var _midpoint = d.x;
            var _newRowPoint = d.x - ( 170 * 3.5)
            var _countInRow = 7;
            var _k = 0;
            var previousTextLong = false;
            var previousDirection = 1;
            // if the node has too many children, go in and fix their positions to two columns.
            if (d.children && d.children.length > 8) {
                var _previousX = _newRowPoint;
                var _previousY = d.children[0].y;
                d.children.forEach(function (d, i) {
                    d.x = _previousX;
                    var s = 0;
                    if(previousTextLong){
                        s = 20*previousDirection;
                    }
                    d.y = _previousY + s;
                    if(d.name && d.name.length > 25){
                        previousTextLong = true;
                        previousDirection = previousDirection * -1;
                    }else{
                        previousTextLong = false;
                    }
                    _k++;
                    if(_k == 8){
                        _k = 0;
                        _previousX = _newRowPoint;
                        _previousY = _previousY + 200;
                    }else{
                        _previousX = _previousX + 170;
                    }
                });
            }
        });

I think this give more customization for positions... I use multiple tree layout in one diagram and manage them after node positions are made ...

Split children in n th rows specific number of children par each row

1 Answers1