Javascript Google可视化组织结构图-动态减少节点之间的空间

我正在使用创建组织结构图

google.setOnLoadCallback（绘图图）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Name'）；
data.addColumn（'string'，'Manager'）；
data.addColumn（'string'，'ToolTip'）；
data.addRows([
[{v:'Mike'，f:'MikePresident'}，，'The President']，
[{v:'Jim'，f:'JimVice President'，'Mike'，'VP']，
[“爱丽丝”，“迈克”，“迈克]，
['Alice2'，'Mike'，''，
['Alice3'，'Mike'，''，
//['Alice4'，'Alice3'，''，
//['Alice5'，'Alice3'，''，
//['Alice6'，'Alice3'，''，
//['Alice7'，'Alice3'，''，
//['Alice8'，'Alice3'，''，
//['Alice9'，'Alice3'，''，
[“鲍勃”、“吉姆”、“鲍勃海绵”]，
[‘卡罗尔’、‘鲍勃’、“”]
]);
var chart=new google.visualization.OrgChart（document.getElementById（'chart_div'））；
draw（数据，{allowtml:true，allowCollapse:true}）；
}

我希望在折叠节点时动态调整节点之间的空间，而不是将其设置为基于子节点数的预先计算的距离。为了举例说明，我在JSFIDLE中创建了2个层次结构

• -当我折叠'Alice3'节点时，我希望它如下所示

---

换句话说，当一个节点折叠时，我希望它显示为没有子节点。只有当我展开节点时，它才会向右滑动并占用更多空间，就像Mike Bostock的可折叠的

OrgCharts是用纯HTML呈现的一样，有很多

，

，还有一个复杂的

colspan

系统，要创建一个防弹javascript构造，对行和列重新排序，并为它们提供新的列跨度，以便在节点扩展或崩溃时最小化空间，这将非常复杂。我说祝你好运！你为什么不直接使用d3（因为“驯金树”是以d3为基础的）？？我敢打赌，在d3中设计节点的外观比覆盖Orgchar的基本行为和内部逻辑要容易得多。是的。。我可能会选择D3路线，但它缺少一些功能，所以我认为它是用纯HTML呈现的，有很多

，

，还有一个复杂的

colspan

系统，要创建一个防弹javascript构造，对行和列重新排序，并为它们提供新的列跨度，以便在节点扩展或崩溃时最小化空间，这将非常复杂。我说祝你好运！你为什么不直接使用d3（因为“驯金树”是以d3为基础的）？？我敢打赌，在d3中设计节点的外观比覆盖Orgchar的基本行为和内部逻辑要容易得多。是的。。我可能会选择D3路线，但它缺少一些功能，所以我认为它是用纯HTML呈现的，有很多

，

，还有一个复杂的

colspan

系统，要创建一个防弹javascript构造，对行和列重新排序，并为它们提供新的列跨度，以便在节点扩展或崩溃时最小化空间，这将非常复杂。我说祝你好运！你为什么不直接使用d3（因为“驯金树”是以d3为基础的）？？我敢打赌，在d3中设计节点的外观比覆盖Orgchar的基本行为和内部逻辑要容易得多。是的。。我可能会选择D3路线，但它缺少一些功能，所以我对此感到担忧

    google.setOnLoadCallback(drawChart);
      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', ''],
          ['Alice2', 'Mike', ''],
          ['Alice3', 'Mike', ''],
//          ['Alice4', 'Alice3', ''],
//          ['Alice5', 'Alice3', ''],
//          ['Alice6', 'Alice3', ''],
//          ['Alice7', 'Alice3', ''],
//          ['Alice8', 'Alice3', ''],
//          ['Alice9', 'Alice3', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);

        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
          chart.draw(data, {allowHtml:true, allowCollapse:true});
      }