Google 可视化组织结构图（节点子节点）

Question

我有一个多层次的组织结构图，下图是其中一部分。 我尝试获取所选节点的所有子节点和子节点，例如，如果选择“Power Business Unit”节点，它会获取所有 3 个子节点，并且每个子节点都这样做。我得到了第一级，但我无法获得树的深度来提供到达最后一个孩子的循环数。

1- 如何获取图表中的最后一个孩子？如何获取树的深度？

2- 是否有放大/缩小工具栏或其他东西，我可以添加到图表中？

这是我的绘图代码：

google.load('visualization', '1', { packages: ['table', 'orgchart'] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'NODE');
        data.addColumn('string', 'PARENT');
        data.addColumn('string', 'NODEID');

        data.addRows(JSON.parse(document.getElementById("<%=HiddenField1.ClientID%>").value));
        //
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));

        function selectHandler() {
            var selectedItem = chart.getSelection()[0];
            if (selectedItem) {
                var oInd = data.getValue(selectedItem.row, 2);

                var arrLoop = chart.getChildrenIndexes(selectedItem.row);
                var arrConcat = chart.getChildrenIndexes(selectedItem.row);


                for (var i = 0; i < arrLoop.length; i++) {
                    var arr2 = new Array(chart.getChildrenIndexes(arrLoop[i]).length);
                    arr2 = chart.getChildrenIndexes(arrLoop[i]);
                    for (var j = 0; j < arr2.length; j++) {
                        arrConcat.push(arr2[j]);
                    }
                    arrConcat.concat(arr2);
                }

                var arrChilds = new Array(arrConcat.length);

                for (var i = 0; i < arrConcat.length; i++) {
                    arrChilds[i] = data.getValue(arrConcat[i], 2);
                }
                drawTable(oInd, arrChilds);
            }
        }

        google.visualization.events.addListener(chart, 'select', selectHandler);

        chart.draw(data, { allowHtml: true });

        //for (var i = 0; i < data.getNumberOfRows() ; i++) {
        //    chart.collapse(i, true);
        //}
    }

Answer 1

不知道图表中最后一个孩子是什么意思。而且这个图表似乎不支持缩放，您可能需要自己编写代码或查看库。关于你选择的孩子和子孩子的问题，你需要处理递归：

    google.visualization.events.addListener(chart, 'select', function(){
          var children=[]
          var selected=chart.getSelection()[0].row;

          function getChilds(index){ // recursive function, adds children of index (row)
              var childs=chart.getChildrenIndexes(index); // get children indexes of current index
              for(var i = 0; i < childs.length;i++){ // for each children
                  children.push(data.getValue(childs[i],0)) // add the title
                  getChilds(childs[i]) // and call the function with this children index, to get their children and so on >> this is recursive
              }
          }

          getChilds(selected) // start recursive function with selected index
          console.log(children)

        })

这里是一个例子：http://jsfiddle.net/36gg3ro1/1/