BreadthFirstSearch for CytoscapeJs layout

Question

I'm using breadthfirst layout in CytoscapeJs and as you can see from the code i pass the root id that i want as the top node.

$('#bottoneDisegna').click(function(){
       
       var soglia_k = $('#soglia_k').val();
       var perc_rimozione = $('#perc_rimozione').val();

       $.ajax({

           url: "/disegnaGrafoSubProcess",
           type: "get",
           data: {soglia_k: soglia_k, perc_rimozione: perc_rimozione},

           success: function(response) {

            var json_obj = response.Cy_json_archi_prima_di_chiusura_atk_supp

            var json_obj_atk = response.Cy_json_archi_prima_di_chiusura_atk_supp_solo_attacchi

            var json_obj_supp = response.Cy_json_archi_prima_di_chiusura_atk_supp_solo_supporti

            var classe_scelta_da_utente = response.classe_scelta_da_utente

            var cy = cytoscape({


                container: document.getElementById('cy_atk_supp'),
                elements:  JSON.parse(json_obj),
                style: [
                {
                  selector: 'node',
                  style: {
                    'id' : 'data(id)',
                    'shape': 'circle',
                    'label': 'data(label)',
                    'text-valign': 'center',
                    'text-halign': 'center',
                    'color': 'black',
                    "height": 150,
                    "width": 150,
                    'border-width': '2px',
                    'border-color': 'black',
                    'background-color': '#399AF9',
                    'font-size': 35
                  }

                }, 
                {
                  selector: 'edge',
                  style:{
                    'label': 'data(weight)',
                    'border-width': '2px',
                    'border-color': 'black',
                    'color':'data(color)', 
                    'font-size': 50,
                    'labelFontWeight': 'bold',
                    'lineColor': 'data(color)',
                    'width': 6,
                    'source-arrow-color': 'data(color)',
                    "curve-style": "bezier",
                    'source-arrow-shape': 'triangle',
                  }
                }
                ],

                
               layout: {
                  name: 'breadthfirst',
                  fit: true, // whether to fit the viewport to the graph
                  directed: true, // whether the tree is directed downwards (or edges can point in any direction if false)
                  padding: 30, // padding on fit
                  circle: false, // put depths in concentric circles if true, put depths top down if false
                  grid: true, // whether to create an even grid into which the DAG is placed (circle:false only)
                  spacingFactor: 1.75, // positive spacing factor, larger => more space between nodes (N.B. n/a if causes overlap)
                  boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
                  avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space
                  nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm
                  roots: "[id = '"+classe_scelta_da_utente+"']", // the roots of the trees
                  maximal: false, // whether to shift nodes down their natural BFS depths in order to avoid upwards edges (DAGS only)
                  animate: false, // whether to transition the node positions
                  animationDuration: 500, // duration of animation in ms if enabled
                  animationEasing: undefined, // easing of animation if enabled,
                  animateFilter: function ( node, i ){ return true; }, // a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts
                  ready: undefined, // callback on layoutready
                  stop: undefined, // callback on layoutstop
                  transform: function (node, position ){ return position; } // transform a given node position. Useful for changing flow direction in discrete layouts

                }
            });

In this case i chose "Survived=0" as the main node (is the top left one), but i want a top-down approach such that node that are connected to "Survived=0" are right under it and this is not happening. The nodes like "Embarked" shouldn't stay at the same depth of the "root", anyone knows why this is happening?

I tried different layout like Dagre but it doesn't have the option to select the root node...