如何在首次显示时折叠包含所有节点的 orgChart，然后通过选择事件显示其子级的第一级？

问题描述

我通过从 json 数据中提取数据来创建一个 orgChart。 起初我只想显示 orgChart 的第一级。我的意思是图表的顶部。 然后当我单击节点时我想列出被单击节点的子节点。我的意思是显示点击节点的一级相关子节点。

这是我点击时的选择事件代码

    function selectHandler(e) {
      //console.log(selectedItem);   
      /////////////////////////////////////
      var selection = chart.getSelection();
    var row;
    if (selection.length == 0) {
        row = prevIoUs;
    }
    else {
        row = selection[0].row;
        prevIoUs = row;
    }
    var collapsed = chart.getCollapsednodes();
    var collapse = (collapsed.indexOf(row) -== 1);
    chart.collapse(row,collapse);
    chart.setSelection([{row: row,column: null}]);}

解决方法

你可以在ready事件中使用collapse方法来折叠节点。
确保在分配就绪事件时使用 addOneTimeListener。
否则，节点将在每次选择时折叠。
这是因为当节点折叠/未折叠时会触发 ready 事件。

请参阅以下工作片段...

google.charts.load('current',{
  packages: ['orgchart']
}).then(function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string','Name');
  data.addColumn('string','Manager');
  data.addColumn('string','ToolTip');
  data.addRows([
    [{'v':'Mike','f':'Mike<div style="color:red; font-style:italic">President</div>'},'','The President'],[{'v':'Jim','f':'Jim<div style="color:red; font-style:italic">Vice President</div>'},'Mike','VP'],['Alice',''],['Bob','Jim','Bob Sponge'],['Carol','Bob','']
  ]);

  var chart = new google.visualization.OrgChart(document.getElementById('chart'));

  google.visualization.events.addOneTimeListener(chart,'ready',function () {
    // loop rows in reverse order
    for (var i = data.getNumberOfRows() - 1; i >= 0; i--) {
      // determine if node has children
      if (chart.getChildrenIndexes(i).length > 0) {
        // collapse row
        chart.collapse(i,true);
      }
    }
  });

  google.visualization.events.addListener(chart,'select',function () {
    // get selection
    var selection = chart.getSelection();

    // determine if selection made
    if (selection.length > 0) {
      // collapse / un-collapse row
      chart.collapse(selection[0].row,(chart.getCollapsedNodes().indexOf(selection[0].row) === -1));
    }
  });

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

注意：使用 select 事件存在问题。当一个节点被取消选择时会触发该事件，并且无法知道哪个节点被取消选择。
因此，如果同一节点被点击两次，第二次点击时不会发生任何事情。

使用默认操作可能有意义，
允许用户双击节点折叠/取消折叠。
并一起删除 select 事件。