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

Question

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

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

    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}]);}

Answer 1

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

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

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', 'Mike', ''],
    ['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>

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

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